Version 5 conflict with Bootstrap

[leon42]

In version 5.x there is a CSS conflict with Bootstrap. I'm using the Default theme, but it appears to affect other themes as well.

In default-base.css there is this global CSS selector that sets the box-sizing:

, ::before, *::after { box-sizing: inherit; }

Bootstrap 4 and 5 have a similar selector that looks like this:

, ::before, *::after { box-sizing: border-box; }

Since it's global (not one of the .rz- selectors) I think it's overriding the Bootstrap selector and causing layout problems. Specifically it affects the size of standard text boxes. After updating the Radzen components to version 5, all of my text boxes appeared too large.

e.g.

[yordanov]

Hi @leon42,

box-sizing: inherit; means that it will inherit the formerly set by Bootstrap box-sizing: border-box;

1. Make sure bootstrap.css is included before default-base.css
2. Clear you browser cache
3. I suspect this size change might be caused by a root font-size. Could you inspect the textbox and see what are the computed font-size and padding?

[psantoro3]

I ran into this issue as well with the bootstrap .nav class and the NavLink component after updating. It might be another point here to help figure out the bootstrap change/issue.

Comparing between Radzen 4.34.4 and 5.0.6 the only computed value to change is box-sizing. All padding and font stuff remained the same. In my case it is now inheriting to "content-type" when previously it was just set to "border-box".

[leon42]

1. bootstrap.css is already included before default-base.css, but I tried changing the order and it made no difference.
2. I tried clearing the cache and hard-reloading and it made no difference.
3. The problem is definitely being caused by the "box-sizing: border-box;" attribute. I did a comparison between the computed CSS attributes with and without the default-base.css included, and that was the only difference.

I also tried adding a hard-coded style to the page head (after the CSS links) to force it back to "border-box" and that fixed the problem. e.g. :

I'm using that as a workaround for now.

[yordanov]

🤦🏻 Oh, misunderstood the issue! As @leon42 was refering to "text boxes" I initially thought it was RadzenTextBox component that got affected, while it was actually the standard input element Bootstrap styles being overridden by Radzen.

Thank you @psantoro3 and @leon42 for clarifying.

[richardaubin]

I just updated my app, and RadzenNumeric which was sizing properly inside a column is now not respecting the boundary and have to override .radzen-numeric-input { width: 100% }