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

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

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