Hi, David.

My name is Ivan and I serve as the technical lead for Kendo UI and Telerik UI for Blazor themes. Just the themes, not the components. In that role, I am more suited to answer your question.

I will first explain why we have diverged from Bootstrap and then address your qestion.

We have consciously diverged from bootstrap for reasons stemming in the difference between Kendo UI and Bootstrap:

• Bootstrap is, in their words, a front end toolkit. Kendo UI is a UI framework
• as such, Bootstrap provides parts of components, without the components them selves, where as Kendo UI is a complete suite of components intended to work together
• many components, such as calendar, scheduler, data table, treeview etc are missing
• components that exist have the most basic scenarios covered -- there are no styles for sorted table, per se.

All that goes to say that at some point in time (and that was pretty early on), we had create our own understanding of how Bootstrap applies to our components. As such, kendo-theme-bootstrap is not so much based, but rather inspired from Bootstrap.

Going back to your original questions: why the styles applied are different -- because we designed (Figma toolkit) it and implemented it based on the button component. Our logic was "If you can type in it, then it's an input and optionally shows popup; if you cannot, then it's sort of a picker and it always shows popup". The only other form component that we have that fits the purpose was a button.

Initially, that wasn't an issue, because both the inputs and buttons had white background.

However, starting with v4, things changed drastically. UX-wise, to us that was a good thing, because it now was visually apparent which component is a dropdown list and which one is autocomplete with open indicator. Still the borders were a UX mess, so we changed our shadow to better match the button and not the inputs. And the button component, in that particular state is gray and has grayish outline (shadow). The same goes for the color picker.

To sum up: we don't match bootstrap styling, not because we cannot, but because our drodown (list, tree, grid) components are based on UX concept that differentiates between form components you can type in and form components you can only choose a predefined value from.

Regards,
Ivan Zhekov
Progress Telerik

Hi, David,

Thanks a lot for the shared feedback. The linked resource shows how to style a native form `select` element, which cannot be used used for the rendering of more complex dropdowns like the DropDownList due to the filtering, virtualization, custom rendering and other functionalities available in the component. You can see the Bootstrap guidelines for styling more complex Dropdown components here:

• https://getbootstrap.com/docs/5.0/components/dropdowns/

Regards,
Vessy
Progress Telerik

Hi, David,

The faced behavior is expected as due to the Bootstrap standards the blue shadow is applied only to the editable input elements, while the DropDownList main wrapper is a non editable span. You can find more details about the Bootstrap style guidelines for inputs and dropdown elements in the links below:

• https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns
• https://getbootstrap.com/docs/4.0/components/forms/#overview

Regards,
Vessy
Progress Telerik