Having trouble getting help?
Contact Support
Contact Support
Style and appearance in Vue List box component
11 Jun 20246 minutes to read
To modify the ListBox appearance, you need to override the default CSS of ListBox component. Please find the list of CSS classes and its corresponding section in ListBox component. Also, you have an option to create your own custom theme for the controls using our Theme Studio
.
CSS Class | Purpose of Class | |
---|---|---|
.e-listbox-wrapper | To customize the listbox wrapper | |
.e-list-parent .e-list-item | To customize the listbox list items | |
.e-list-parent .e-list-item:hover | To customize the listbox list items on hover | |
.e-list-parent .e-list-item.e-selected | To customize the listbox selected list item | |
.e-listboxtool-wrapper .e-listbox-tool | To customize the listbox toolbar | |
.e-listboxtool-wrapper .e-listbox-tool .e-btn | To customize the listbox toolbar button | |
.e-listboxtool-wrapper .e-listbox-tool .e-btn .e-btn-icon.e-icons::before | To customize the listbox toolbar icon |
Horizontal ListBox
You can use cssClass property to display the Listbox horizontally.
<template>
<div id="app">
<div id='container' style="margin:10px auto 0; width:250px;">
<ejs-listbox :dataSource='data' cssClass='e-horizontal-listbox'></ejs-listbox>
</div>
</div>
</template>
<script setup>
import { ListBoxComponent as EjsListbox } from "@syncfusion/ej2-vue-dropdowns";
const data = [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' },
];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
/* Custom css for horizontal listbox */
.e-horizontal-listbox .e-list-parent {
display: inline-flex;
align-items: center;
}
.e-horizontal-listbox {
overflow-y: hidden;
height: 100px;
}
.e-horizontal-listbox .e-list-parent .e-list-item {
width: max-content;
line-height: 100px;
height: 100px;
}
</style>
<template>
<div id="app">
<div id='container' style="margin:10px auto 0; width:250px;">
<ejs-listbox :dataSource='data' cssClass='e-horizontal-listbox'></ejs-listbox>
</div>
</div>
</template>
<script>
import { ListBoxComponent } from "@syncfusion/ej2-vue-dropdowns";
export default {
name: "App",
components: {
"ejs-listbox": ListBoxComponent
},
data() {
return {
data: [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' },
]
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
/* Custom css for horizontal listbox */
.e-horizontal-listbox .e-list-parent {
display: inline-flex;
align-items: center;
}
.e-horizontal-listbox {
overflow-y: hidden;
height: 100px;
}
.e-horizontal-listbox .e-list-parent .e-list-item {
width: max-content;
line-height: 100px;
height: 100px;
}
</style>