Last Updated: 02 Sep 2021 12:52 by ben
Created on: 18 Aug 2021 15:12
Category: ComboBox
Type: Bug Report
Upgrade from 2.25.0 to 2.26.0 ComboBox Appears "Doubled Up" Using Bootstrap Theme

Example Repo:

Steps To Reproduce

  • Run application and navigate to https://localhost:5001/updateweather
  • Examine the ComboBoxes 'OData Weather Forecasts' and 'OData User' appears correct
  • Stop application, change package reference for Telerik.UI.for.Blazor from version 2.25.0 to version 2.26.0
  • Clean/Rebuild/run application and navigate back to https://localhost:5001/updateweather
  • ComboBox now appears 'doubled', there are two boarders around the ComboBox
Posted on: 02 Sep 2021 12:52


Appreciate the detailed explanation.  From an engineering perspective I completely understand the decisions made regarding future support of a third party CSS systems.  

As a user/consumer of the toolkit thank you for recognizing this change was not effectively communicated to the community.  I look forward to a detailed blog post / updated release notes on other changes I should look out for when migrating from 2.25.0 to 2.26.0.


Ivan Zhekov
Posted on: 30 Aug 2021 10:18


I tend to overdeliver in explanations, so bare with me...:

Is this caused by Telerik moving from Bootstrap 4 to Bootstrap 5?

Strictly speaking -- no, there is not direct connection (causality) between the upgrade to Bootstrap 5 and this particular bit. Rather it's a combination of the difficulties we encountered during the upgrade process, features already in the components and upcoming / pending improvements in our own input components.

The styles contained in form-control class name, imply that the class name should be applied to input elements only, or other elements that should appear like inputs. In detail, they make the components to block level elements and set certain properties, like width, border and padding.

Those exact styles are the reason why you see the double border and padding...

Moving on... to reset those styles, we need to remove the padding for all our components that can have the class name applied, which is pretty much all of our input components, with the exception of range picker, which cannot be saved by any overrides...

That part by itself is not that hard and can be worked around fairly easy. What's hard is that Bootstrap supports sizes and we are also working on sizes. Imagine a Telerik combobox (with default medium size) with custom Bootstrap small size class name. So which size do we respect?

Considering, we never committed to supporting third party styling, like Bootstrap, Tailwind, that temporary "fix", turned out to cause much more issues than it solves.

Lastly, while our theme is built against Bootstrap 5, developers could still load Bootstrap 4 as external dependencies and styles wouldn't match then, at all!

To sum up -- while there was not a requirement to remove said workarounds for upgrading from bootstrap 4, we did so, because it streamlined our code, removed bugs and it will be a requirement once we roll out our own sizing. Also, we are now treating Bootstrap like any other third party framework, instead of showing favourble attitude and patching for wrong usage.

If this is the case...

No extra work is required from customers (I will go into that in a bit) -- our themes compile the same way they previously did and are included the same way. We also created color swatches for customers wanting to retain bootstrap 4 look. Those are deployed on our cdns like so -- (This is the swatch based on the colors of bootstrap 4 and it matches version 4.40.0 of our bootstrap theme).

That extra bit

Depending on your expectations from applying form-control class, the amount of work required to migrate differs.

If you just need the components to look like bootstrap components -- there is no extra work. Optionally, depending on the version you want, you may need to load the correct styles.

If you want the input components to be 100% wide and on a separate line, that can be achieved with just a bit of styling and can be applied either on a per component basis (as attribute) or on a page level, via styles or even for the whole application, if you want to be the case. And I am not talking crazy amount of styles -- just a couple of lines.

Note: we could have added the 100% width as we upgraded to bootstrap 5, but that would be a much bigger change, in terms of customer impact, so we left it for the next major version of our themes, due out with 2022 R1.

Looking at the screenshot you applied, I am assuming it's the latter. To resolve the issue, you could use Telerik Blazor forms, which makes Telerik components 100% wide.

You could also apply said workaround, without removing form-control:

.k-combobox.form-control {
    padding: 0;
    border-width: 0;
    display: flex;

The first line removes the extra space; the second the double border; the third line is not specifically needed for combobox, but if you need to target other components, it will be needed (for instance textbox)

I know that's a lot of text to process... Did I manage to answer your questions and explain how to workaround the side effects properly, or should I give it another try?

We definitely didn't do a good job in explaining what upgrading to Bootstrap 5 meant and I would like to, at least, alleviate some of the frustration by providing a blogpost / announcement / documentation.

Ivan Zhekov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Posted on: 26 Aug 2021 12:14


Can you clarify:

  • Is this caused by Telerik moving from Bootstrap 4 to Bootstrap 5?
  • If this is the case, can you pin what you were shipping for "_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" at Bootstrap 4 and either version or ship "something else" to let people know they will need to put in some work to use Bootstrap 5?

I'm not ready to move my whole application to Bootstrap 5, and cannot chase down all of the changes this is going to cause to my UI.  Your suggestion below of -- just remove `form-control` class from the combobox. does not fix my form, as seen from the attached screenshot.


Ivan Zhekov
Posted on: 26 Aug 2021 08:49

Hello, Ben.

This has already been reported by other customers --

You can read the post in detail to why this is happening and how you can fix the issue, but the short part is -- just remove `form-control` class from the combobox.

Similarly, you may experience issues with other third party vendors, such as tailwind, as noted in this thread --

Ivan Zhekov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at