CSS classes for DropDownList ?

[Stefan Heimbach]

I need to customize the DropdownList Component.

I want to increase its size. 

I was able to increase the main part but then the list gets cut off. (attached screenshot)

Is there any CSS Documentation of all the components? I can find it 

Attachment: Screenshot_20210108_153050_6c1505ea.zip

[Berly Christopher]

Hi Stefan, 

  

Greetings from Syncfusion support. 

  

Query 1: 

  

I need to customize the DropdownList Component. 

I want to increase its size.  

I was able to increase the main part but then the list gets cut off. (attached screenshot) 

  

Response: 

  

We can customize the DropDownList popup component with help of the PopupWidth and PopupHeight property as mentioned below code example. 

  

<SfDropDownList TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" PopupHeight="350px" PopupWidth="550px"> 

    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 

</SfDropDownList> 

  

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_PopupHeight  

  

Query 2: 

  

Is there any CSS Documentation of all the components? I can find it  

  

Response: 

  

Component	Documentation Link
ListView	https://blazor.syncfusion.com/documentation/listview/customizing-templates/#template
Tooltip	https://blazor.syncfusion.com/documentation/tooltip/style/
Range slider	https://blazor.syncfusion.com/documentation/range-slider/style/
DashboardLayout	https://blazor.syncfusion.com/documentation/dashboard-layout/style/
Sidebar	https://blazor.syncfusion.com/documentation/sidebar/style/
Grid	https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/
Dialog	https://blazor.syncfusion.com/documentation/dialog/style/
Inplace-editor	https://blazor.syncfusion.com/documentation/in-place-editor/style/
RichTextEditor	https://blazor.syncfusion.com/documentation/rich-text-editor/style/
Splitter	https://blazor.syncfusion.com/documentation/splitter/style/
Toast	https://blazor.syncfusion.com/documentation/toast/style/
Spinner	https://blazor.syncfusion.com/documentation/spinner/style/
Calendar components	We will add the information in UG in Volume 4 SP release
DropDown Components	We will add the information in UG in Volume 4 SP release
Input components	We will add the information in UG in Volume 4 SP release
Uploader	We will add the information in UG in Volume 4 SP release
Chart	CSS styles is not applicable for chart component. We are using API for customizations.
TextBox	https://blazor.syncfusion.com/documentation/textbox/how-to/customize-the-textbox-background-color-and-text-color/

               

  

Regards, 

Berly B.C 

[kevin vickers]

You say the CSS definition will be available "We will add the information in UG in Volume 4 SP release " do we know when this will be .. trying to change a dropdown background and font with css doesnt seem to work 

[Berly Christopher]

Hi Kevin, 

  

The changed not included in the Volume 4 SP 1 release. We will intimate once the documentation will be published in online. Also, we can change the font and background of the DropDownList component as mentioned below. 

  

<style> 

    .e-custom.e-input-group.e-control-wrapper { 

        background: #cec6c6; 

        font-size: 10px; 

    } 

</style> 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_DropDown_App_Background-1442346685  

  

Regards, 

Berly B.C