How to change DropDownList Size?

[Rob]

I'm trying to adjust the existing size definitions as outlined here in your docs:

https://www.telerik.com/blazor-ui/documentation/components/dropdownlist/appearance

I'd like to adjust the definition for sm, md, lg as they don't work well with TailwindCSS settings.  For example lg is just a tad too large and md is a tad too small

This is lg:

This md:

I want to match the border size to our standard input text (aka Postal Code example above).  I can't seem to find where sm, lg, md are defined?  And, is there a relative "simple" way to modify without going down a "custom" theme path?

Rob.

 

[Hristian Stefanov]

Hi Rob,

If the built-in sm/md/lg options do not cover your desired appearance. You can adjust the DropDownList height by using the CSS shown below:

<style>
    .k-dropdownlist {
        height: 40px;
    }
</style>

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="selectedValue"
                     Width="300px">
</TelerikDropDownList>

@code {
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    int selectedValue { get; set; }

    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}

Regards,
Hristian Stefanov
Progress Telerik

[Rob]

Perfect, thank you.

May I ask where/how do you know all the ".k-" class selectors?  Is there a list/documentation somewhere showing them all?