Changing the style of a scrollbar created by the listbox

[Arseney]

I have a simple listbox set up in the following way -

 <ej:ListBox ID="ListBox2" runat="server" SortOrder="None" CssClass="list" ShowRoundedCorner="True" Height="500px">

    </ej:ListBox>

When the number of items within the listbox exceeds its height, a scrollbar is generated. Is there a way for me to control the position of the scrollbar (I would like it to be positioned on the left of the listbox rather than the right), its colors and remove the arrows?

[Janakiraman Sakthivel]

Hi Arseney, 

 

Thank you for contacting Syncfusion support. 

 

Query1 - Control the position of the scrollbar: 

 

We have used the HTML scroller in the list box and we have an enableRtl property in our ListBox. By using this property, you can render the scroller on the left. 

 

Query2 - Scrollbar colors and arrows: 

 

We can achieve your reported requirements by using the CSS style as shown in the code below. 

 

[Index.cshtml]:  

<ejs-listbox id="Roles" dataSource="@ViewBag.DefaultData" enableRtl="true" cssClass="list" height="300px" > 

 

</ejs-listbox> 

<style> 

/* width */ 

::-webkit-scrollbar { 

  width: 15px; 

} 

/* Handle */ 

::-webkit-scrollbar-thumb { 

  background: #0000FF; 

  border-radius: 10px; 

} 

</style> 

 

  

For your convenience, we have prepared the sample based on your requirement. Please find the link below. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/171566/ze/core-sample193344378 

 

API Link: https://ej2.syncfusion.com/documentation/api/list-box/#enablertl 

 

Could you please check the above links and get back to us, if you need any further assistance on this.  

 

Regards,  

Janakiraman S.