remove margins and borders
Hi Társis,
We have reviewed your provided screenshot, and using the below custom CSS style, we can remove the extra space appearing on the left and right sides of the list items of the list box. Refer to the below CSS style.
|
@using Syncfusion.Blazor.DropDowns
<div style="width: 200px;"> <SfListBox CssClass="e-custom" TValue="string[]" DataSource="@Games" TItem="string"></SfListBox> </div>
@code { public string[] Games = new string[] { "Badminton", "Cricket", "Football", "Golf", "Tennis", "Basket Ball", "Base Ball", "Hockey", "Volley Ball" }; }
<style> .e-custom .e-list-item { padding: 0 !important; } </style> |
Output screenshot:
If the provided CSS style does not meet your requirements, then kindly share your listbox code snippet with a custom CSS style and share which theme you are using. Based on those details, we will check and provide the better solution.
Regards,
YuvanShankar A
Hi Társis,
We have validated your shared code snippet and refer to the below code snippet to remove the left and right space for list items of Listbox.
Set the correct width for parent element of listbox, based on text width of list item
|
<div style="width: 385px;"> <SfListBox CssClass="e-template-listbox" TValue="long" DataSource="Faturamentos" TItem="FaturamentoModel"> …… </SfListBox> </div> |
Minimize the padding value for li element.
|
.e-template-listbox .e-list-item { line-height: 1.5 !important; padding: 0 3px !important; // due to this style, the left and right margin appears, set minimum value } |
Output screenshot:
Please check with attached sample code file and get back to us if you need any further assistance on this.
Regards,
YuvanShankar A
Attachment: Home_cee9f893.zip
