How to control visual layout of DropDownListPopupSettings ... list of the .k class selectors?

[Rob]

I've tried to find documentation on how to modify the CSS for the dropdownlist and it's popup but can't seem to figure out how to change the "Search" area size, nor the "Select Type" (they are too large).

I was able to figure out how to adjust the actual items:

.custom-compact-dropdownlist-popup .k-list-item {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.90em;
}

and reference:

<DropDownListSettings>
    <DropDownListPopupSettings Class="custom-compact-dropdownlist-popup" />

but I don't know what to use in CSS ... is there a list somewhere of the ".k" class selectors?

Rob.

[Rob]

Any help?  Haven't been able to find a way around this UI issue.

[Dimo]

Hello Rob,

The browser's DOM inspector is the best HTML/CSS documentation you can get. The Progress Design System Kit website maintains some documentation about HTML rendering, but as a former front-end developer, I can assure you that no static documentation content can reliably tell you how to override styles in a variety of arbitrary scenarios.

The following documentation content is generic, but highly recommended and even required: How to override Telerik theme styles. It summarizes all the relevant general CSS knowledge and also links to a tutorial that shows how to inspect tooltips, drop downs and other elements that can hide automatically.

If you want to target all DropDownLists in the app, you can use .k-list-container instead of a custom popup class.

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValue"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     Filterable="true"
                     FilterOperator="@StringFilterOperator.Contains"
                     DefaultText="Select Value"
                     Width="300px">
    <DropDownListSettings>
        <DropDownListPopupSettings Class="foo" />
    </DropDownListSettings>
</TelerikDropDownList>

<style>
    .foo .k-list-optionlabel,
    .foo .k-input-inner {
        background: yellow;
        border: 1px solid red;
        padding: 0;
    }
</style>

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();

        for (int i = 1; i <= 24; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i}",
                Category = $"Category {i % 6 + 1}"
            });
        }

        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
    }
}

 

Regards,
Dimo
Progress Telerik

[Rob]

Thanks for the response Dimo.

I was able to locate the reference to the search icon .k-svg-icon which is probably the reason for the large input box.

 

I'll experiment with .k-list-container now and see if that works well for me.

[Rob]

No luck with application wide setting of .k-list-container.  

After hours of trying to locate the specific settings, I was able to locate these two and make adjustments but can't find they aren't working as expected:

.k-list-md {
    line-height: 6px;
}
.k-list-content {
    font-size: small;
    
}

Unfortunately trying to identify Telerik dropdown selectors using my browser's developer mode is very difficult.  Can't select the control when it's in a dropdown state as it will just animate and close and that's all I see (even after expanding).  Even when using the select an element to inspect cursor, there is no way to select the actual dropdown list elements (at least I couldn't find a way).  Very inefficient way of trying to figure out how something is being styled.  Hours of trial and error, not fun and was hoping you folks had some documentation that defined the CSS selector for every visual control you folks sell ... would go A LONG way in helping.

I get that perhaps you want to push the sales of the Theme Builder and I'm trying to get my company to purchase, but it's end of year so all funding requests are on hold until next year.

[Dimo]

@Rob

Yes, trying to inspect auto-hiding popups in the classic way is a pain, but et me highlight a part from my previous reply:

The following documentation content is generic, but highly recommended and even required: How to override Telerik theme styles It summarizes all the relevant general CSS knowledge and also links to a tutorial that shows how to inspect tooltips, drop downs and other elements that can hide automatically.

Here is the tutorial that I was referring to (linked from the Tools section) and I am also attaching a video that shows how to inspect a dropdown and how to confirm where are the padding styles that you wanted to override.

In addition, here are some more thoughts on why documentation about CSS selectors is infeasible and ineffective:

• If we list all Telerik .k-... classes and describe them, this will still not provide information about:
  • The exact usage and CSS specificity of each CSS rule in the theme.
  • How to override a specific style. There are multiple ways to implement a CSS override, depending on your preferences and exact scenario.
• If we list all CSS rules together with code snippets, this means to copy-paste the whole CSS theme in the documentation, together with a description what each CSS rule does.
  • The size of this documentation will be massive and the initiative itself will be an overkill. There are over 10,000 CSS rules in each of our themes and all this will require maintenance too.
  • Even if we add comments in the theme itself (instead of documentation), the DOM inspector won't show them.
  • The documentation will still not answer questions about overrides or troubleshooting. For example, how will it help if a third-party CSS rule in the app breaks our own styles? Or if an app uses an outdated theme and the components look broken? So, the documentation will still have to be used together with the DOM inspector.
  • The value of this documentation will be almost zero to people who are comfortable with CSS and use the DOM inspector. On the other hand, the value will be rather questionable for all others.

Finally, I can assure you that the above statement is not "inspired" by the existence of the Telerik ThemeBuilder. It can surely help in similar tasks, but the decision to buy it must correspond to the expected frequency or amount of usage.

[Rob]

Hi Dimo,

Video was helpful, had not thought about using console to set timeout so as to be able to work with identification during dropdown.  

I understand your opinion on CSS documentation relative to Telerik controls.  I agree to some extent and you're working within what's available.  The global picture is that more and more companies don't have or will not budget dedicated CSS resources for UI creation/support ... they just fall back on "full stack".  Since this is a common reality, I've bumped into over the decades, I've wanted solutions.  It's why we use Telerik so as to avoid getting involved in CSS and focusing on other aspects of the development process.

I have read the documentation on override Telerik theme styles.  The problem is, as per your video, finding ALL the related styles/selectors that need to be modified.  I can make custom selector, but I have to then set the Class on every control to my customer selector ... so my obvious course of action is to override the global selector once in the .CSS file ... this is where the challenge comes.  For example:

.custom-compact-row-grid .k-grid-header .k-table-th,
.custom-compact-row-grid .k-grid-content .k-table-td {
    padding: 2px;
}

and 

<TelerikGrid TItem="@BookingModel"
             @ref="@BookingGridRef"
             Height="calc(20vh + 2rem)"
             Class="custom-compact-row-grid"
             Resizable="false"

this works at the individual Class reference level for the control.  HOWEVER, this does NOT work globally:

.k-grid-header {
    padding: 1px;
}

.k-table-th {
    padding: 1px;
}

.k-grid-content {
    padding: 1px;
}

.k-table-td {
    padding: 1px;
}

I get different results, most likely because there is something else in the .k- selector that I need to find and adjust but just haven't found it yet? 

Your link to Improve Your Debugging Skills with Chrome DevTools is excellent ... but look at how much work is being performed for what is the simplest of tasks, like center text, or change the color, or adjust the padding.  Now if you look at that process and go "this is normal", then you must be young (I'm 61 and started coding age 16) ... this shouldn't be accepted as "normal", not in 2025.  I realize a bit of digression here, but stepping back and looking at this objectively ... it's NOT an efficient process.

I'm hoping ThemeBuilder will isolate me from some of this CSS process?  It's not that I don't want to get involved in CSS, it's that I don't have time to get involved in CSS (it's the very reason why I look at component tools).  Is that an accurate assumption or will I still be mired in hunting client-side CSS code even when using ThemeBuilder?

Rob.

[Dimo]

When using only our CSS classes, you need to ensure that your custom CSS rules have higher specificity than the rules in our theme. Please refer to the tutorials that are linked in the CSS knowledge section.

For example, if our theme rule looks like this:

.k-table-td {
  padding: 8px;
}

Then you can use one additional class or element to achieve higher specificity:

.k-grid  .k-table-td {
  padding: 2px;
}

OR (note the lack of space)

td.k-table-td {
  padding: 2px;
}

Finally, it is also possible to override our styles with the same specificity, but your styles must come after ours. This is why we recommend you to put our theme before app.css and before the CSS isolation file.

>> I'm hoping ThemeBuilder will isolate me from some of this CSS process?

The paid version of the ThemeBuilder allows you to modify styles in a visual interface and you may find the required rules more easily. However, you need to test if the overall approach is more convenient to you. I can't claim that by default.

>> It's not that I don't want to get involved in CSS, it's that I don't have time to get involved in CSS (it's the very reason why I look at component tools).

I understand that every developer has expectations that a third-party UI library will save some web development effort. I do believe that we meet this requirement. However, if you accept the need to get involved with C# to do .NET-based web development, then why do you challenge the need to get involved with CSS? There are only a handful or concepts and rules to know. The required time to learn them should be less than one hour. Then, CSS coding becomes a lot easier. In short:

• Selectors are expressions that target markup on the page by tag, class, id, attribute, and some other exotics.
• Combinators are expressions that combine selectors with some relationship between them (descendants, parent-child, siblings, etc.)
• Different selectors have a different specificity ("weight"). More selectors of a given type take precedence over fewer selectors of the same type. One ID selector always takes precedence over any number of class selectors. One class selector takes precedence over any number of type (tag) selectors.
• Inline styles take precedence over <style> tags, which take precedence over external CSS files. This rule applies regardless of the specificity of the conflicting rules.

Also see Handling CSS Conflicts.

[Rob]

 

Excellent informattion thanks Dimo ... using browser dev mode I did discovered I needed to set higher specificity.

We don't have an app.css.  We have a site.css, all.css (fontawesome), styles.css (generated by TailwindCSS), and of course your Telerik theme'd css loaded in _Host.cshtml in this order:

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-material/all.css?@telerikUiForBlazorVersion" rel="stylesheet" /> 
<link href="lib/fontawesome/css/all.css" rel="stylesheet" />
<link asp-href-include="css/styles.css" rel="stylesheet">
<link asp-href-include="css/site.css" rel="stylesheet" />

I'm overriding in site.css (the last entry above) so I think the above is correct where Telerik theme is first.

Thanks for all your assistance, much appreciated.

Rob.