Completed
Last Updated: 26 Jul 2023 13:58 by ADMIN
David
Created on: 14 Oct 2022 12:16
Category: KendoReact
Type: Bug Report
0
kendo-theme-bootstrap does not apply bootstrap styles to dropdowns

Hi,

Please see the following example of the dropdownlist with bootstrap theme applied:

https://stackblitz.com/edit/react-ejxe44?file=index.html

I have updated the bootstrap cdn to latest. Notice that bootstrap styling is applied to the dropdowns including focus shadowing.

Now please see the exact same example but with theme customisation using a custom scss file:

https://stackblitz.com/edit/react-tuq49c-g6ofwn?file=index.scss

Notice that bootstrap styling is no longer applied to the dropdowns, which do not have focus shadowing.

Kind regards,

David

6 comments
ADMIN
Kiril
Posted on: 28 Oct 2022 11:59

Hello, David,

I am sorry for the misunderstanding. You are right that with importing Kendo-Bootstrap we are setting `$enable-shadows` to true, which overwrites the default value from Bootstrap. You don't have to switch the order of the imports. You can just change the value of `$enable-shadows` as shown here:  https://stackblitz.com/edit/react-tuq49c-ptaeeu?file=index.scss

I have logged the issue, so you can track its progress here:

https://github.com/telerik/kendo-themes/issues/4068

As a small token of gratitude for your report, I have added 1000 Telerik points to your account. Please, excuse us for the inconvenience.

Regards,
Kiril
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

David
Posted on: 25 Oct 2022 10:16

Hi Kiril,

I'm not talking about focused states. The Bootstrap documentation spells out exactly the problem I'm having when following your documentation:
"Enables predefined decorative box-shadow styles on various components".

If you follow Kendo documentation it results in these decorative box-shadow styles being applied to form-control inputs. This is evident in the very example you provided me earlier:

https://stackblitz.com/edit/react-tuq49c-zadpka?file=index.scss

Look at the two form-control inputs; they have decorative box-shadow styles. As I mentioned earlier, I am working around this bug by importing Bootstrap first, and then setting $enable-shadows to true before importing kendo-theme-bootstrap, but it would be nice to have this clearly documented in your documentation i.e. where you say "If you include the Bootstrap framework from its source, you have to add kendo-theme-bootstrap and any variable customizations before you import the Bootstrap framework" you could also add "note: this will set $enable-shadows to true and apply predefined decorative box-shadow styles on Bootstrap components".

Kind regards,

David

ADMIN
Kiril
Posted on: 25 Oct 2022 09:43

Hello David,

According to the Bootstrap documentation, $enable-shadows does not affect the box-shadow used for focused state. I guess this might be causing some confusion.

 

Regards, Kiril Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

David
Posted on: 21 Oct 2022 11:49

Thanks Kiril,

Your example results in an inset box shadow being applied to standard bootstrap inputs: inset 0 1px 2px rgb(0 0 0 / 8%)

I have identified the issue in the first line of @progress\kendo-theme-bootstrap\scss\_bootstrap-overrides.scss:

$enable-shadows: true !default;

This variable is set as follows in bootstrap\scss\_variables.scss:

$enable-shadows: false !default;

So if you follow the Kendo documentation it results in shadows being applied to standard Bootstrap inputs. I have worked around this bug by importing Bootstrap first, and then setting $enable-shadows to true before importing kendo-theme-bootstrap.

Kind regards,

David

ADMIN
Kiril
Posted on: 21 Oct 2022 11:37

Hello, David,

I have went through your examples and, if I am not mistaken, the differences you are seeing are in the font-family and the focused input. Regarding the focused input, the box-shadow color is a mix between the primary color and opacity. In case you want to overwrite only the bootstrap variables, you can move them as shown in this example: 

https://stackblitz.com/edit/react-tuq49c-zadpka?file=index.scss

Please elaborate on the specific differences you are seeing, in case I did not cover your case, so I can further look into it.

Regards, Kiril 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 https://learn.telerik.com/.

David
Posted on: 15 Oct 2022 06:28

For some context, what we are trying to achieve is using the Kendo UI Bootstrap theme in conjunction with the Bootstrap framework along with a handful of variable overrides. As per the documentation, "If you include the Bootstrap framework from its source, you have to add kendo-theme-bootstrap and any variable customizations before you import the Bootstrap framework".

However, if you do this then strange styles are applied to regular form controls. Please see the following example:
https://stackblitz.com/edit/react-tuq49c-489abs?file=app/main.tsx

If you ignore the documentation and import the Bootstrap framework first, then kendo controls do not have Bootstrap styling. Please see the following example:

https://stackblitz.com/edit/react-tuq49c-dadvar?file=app/main.tsx

If you do not perform any variable overrides and instead just use precompiled css, then both Bootstrap form and kendo controls are styled appropriately:

https://stackblitz.com/edit/react-tuq49c-xq4q7b?file=app/main.tsx

Can you please tell me how to achieve this while also overriding some variables?

Kind regards,

David