Ben,

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 -- https://cdn.kendostatic.com/themes/4.40.0/bootstrap/bootstrap-4.css. (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.

Regards,
Ivan Zhekov
Progress Telerik

Hello, Ben.

This has already been reported by other customers -- https://www.telerik.com/forums/2-26-bootstrap-theme-missing-k-widget-form-control-padding-override.

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 -- https://www.telerik.com/forums/radio-button-not-selected-until-blur.

Regards,
Ivan Zhekov
Progress Telerik