Search results

Styles and Appearances in React ListBox component

29 Nov 2022 / 2 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.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // define the array of object
        this.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' },
        ];
    }
    render() {
        return (
        // specifies the tag for render the ListBox component
        <ListBoxComponent dataSource={this.data} cssClass='e-horizontal-listbox'/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        /* 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>
</head>

<body>
    <div id='sample' style="margin: 20px auto 0; width:250px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

export default class App extends React.Component<{}, {}> {
  // define the array of object
   private data: { [key: string]: Object }[] = [
    { 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' },
];
  render() {
    return (
        // specifies the tag for render the ListBox component
      <ListBoxComponent dataSource={this.data} cssClass='e-horizontal-listbox'/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));