Styles and Appearances

14 Nov 20223 minutes to read

To modify the ListBox appearance, you need to override the default CSS of ListBox component. 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.

<div id="listbox-container">
    <ejs-listbox id="listbox" dataSource="@ViewBag.data" cssClass="e-horizontal-listbox"></ejs-listbox>
</div>

<style>
    #listbox-container {
        margin: 20px auto 0;
        width: 250px;
    }
    /* 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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class AutoCompleteController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.data = new string[] { "BadmHennessey Venominton", "Bugatti Chiron", "Bugatti Veyron Super Sport", "SSC Ultimate Aero", "Koenigsegg CCR", "McLaren F1", "Aston Martin One- 77", "Jaguar XJ220" };
            return View();
        }
    }
}