Is there a way to set the item height of listbox?

[Huifei Rao]

If yes, how? Thanks.

[Gayathri KarunaiAnandam]

Hi Huifei, 

Greetings from Syncfusion Support. 

We have checked your reported query and we can set height to listbox component using Css style sheet as demonstrated in the below code snippet 

 

 HTML: 

 

<div class="col-lg-12 control-section"> 

    <div id="listbox-control"> 

        <h4>Select your favorite car:</h4> 

        <ejs-listbox [dataSource]='data'></ejs-listbox> 

    </div> 

</div> 

 

TS: 

 

 // dataSource definition 

    public 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' } 

    ]; 

 

CSS: 

 

.e-listbox-wrapper .e-list-item { 

  height: 40px !important; 

} 

 

.e-listbox-wrapper { 

  height: 350px; 

} 

  

For your reference, we have prepared a sample based on this scenario 

Link: https://stackblitz.com/edit/angular-hetuul?file=app.component.css 

Kindly check with the above sample. Please let us know, if you need any further assistance. 

Regards, 

Gayathri K 

[Huifei Rao]

Works great! Thanks

[Aravinthan Seetharaman]

Hi Huifei, 

 

Thanks for the update.  

 

We are happy to hear that your issue has been resolved. Please feel free to contact us, if you need any further assistance on this. 

 

Regards, 

Aravinthan S