Latest Blazor Breaks Bootstrap Layouts #1330

New Issue

claunia · 2026-01-29T17:52:09Z

claunia commented

2026-01-29 17:52:09 +00:00

Originally created by @mysteryx93 on GitHub (Aug 5, 2024).

After updating Radzen, I'm having issues with broken Bootstrap layouts. After investigating, it's due to this being defined by Radzen, which overrides box-sizing: border-box

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

Radzen version 5.0.6

OS: Garuda Linux
Browser: FireDragon 11.15

I don't know why that code was introduces but you should avoid breaking Bootstrap layouts.

When I look in the browser with inspect tools and disable this Radzen rule, then the row comes back to normal.

Here's a sample row that should display on a single line; but now splits into 2.

<div class="row">
    <div class="col-2">Email:</div>
    <div class="col-10"><input type="text" style="width: 100%" /></div>
</div>

I tried fixing it with this in my CSS but it's not working. Removing Radzen.Blazor.js is the only "fix" I found.

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

The other working fix is reverting back to Radzen 4.34.4

Originally created by @mysteryx93 on GitHub (Aug 5, 2024). After updating Radzen, I'm having issues with broken Bootstrap layouts. After investigating, it's due to this being defined by Radzen, which overrides `box-sizing: border-box` ``` *::before, *::after { box-sizing: inherit; } ``` Radzen version 5.0.6 - OS: Garuda Linux - Browser: FireDragon 11.15 I don't know why that code was introduces but you should avoid breaking Bootstrap layouts. When I look in the browser with inspect tools and disable this Radzen rule, then the row comes back to normal. Here's a sample row that should display on a single line; but now splits into 2. ``` <div class="row"> <div class="col-2">Email:</div> <div class="col-10"><input type="text" style="width: 100%" /></div> </div> ``` I tried fixing it with this in my CSS but it's not working. Removing `Radzen.Blazor.js` is the only "fix" I found. ``` *::before, *::after { box-sizing: border-box !important; } ``` The other working fix is reverting back to `Radzen 4.34.4`

claunia closed this issue

2026-01-29 17:52:10 +00:00

claunia commented

2026-01-29 17:52:10 +00:00

@yordanov commented on GitHub (Aug 5, 2024):

Duplicate of https://github.com/radzenhq/radzen-blazor/issues/1632

@yordanov commented on GitHub (Aug 5, 2024): Duplicate of https://github.com/radzenhq/radzen-blazor/issues/1632

claunia referenced this issue

2026-01-29 18:19:56 +00:00

[PR #1330] [MERGED] #1329 Optional pagination text labels for PagedDataBoundComponent Pre… #2673

Sign in to join this conversation.