This is a migrated thread and some comments may be shown as answers.

How do I format the <option> part of a dropdown?

1 Answer 79 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Roland
Top achievements
Rank 3
Iron
Iron
Veteran
Roland asked on 07 Sep 2020, 02:57 PM

See the attached image. The flag images are only 21px wide, but the PopupWidth is 69px.

So I seem to have 48px of margins and/or paddding.
Since the dropdown collapses when it no longer has the focus, i cannot see the styles in Chrome Devtools.

I am using <ItemTemplate> and <ValueTemplate> to format the <select> and <option> elements.

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 07 Sep 2020, 03:27 PM

Hello Roland,

The following blog posts can help you examine elements, including popups that hide:

The dropdown elements have some default padding that you can remove globally for all dropdowns. For particular instances, this needs to be implemented first: https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance.

Here's a very basic example of removing all paddings from the dropdowns (note that it will affect other dropdowns on the page too):

<style>
    .k-list-scroller .k-list li.k-item {
        padding: 0;
    }
</style>

<TelerikDropDownList Data="@MyList" @bind-Value="@MyItem" PopupWidth="auto" PopupHeight="auto">
    <ValueTemplate>@context</ValueTemplate>
    <ItemTemplate>@context</ItemTemplate>
</TelerikDropDownList>

@code {
    protected List<string> MyList = new List<string>() { "a", "b", "c" };

    protected string MyItem { get; set; } = "b";
}

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
DropDownList
Asked by
Roland
Top achievements
Rank 3
Iron
Iron
Veteran
Answers by
Marin Bratanov
Telerik team
Share this question
or