RadzenFieldset Legend not loading correctly

This is working in my main app where I have blazor components but I'm looking to migrate over to full Blazor server application when I was setup all off the back this issue came up.

image
new app layout

I'm expect this functionality (screenshot form another app ( razor pages with blazor components)

Older app i end up finding the .js and .css files and declaring them statically not sure where I got them at this point but I was trying to do this correctly with the new app by using _content instead....

Hi @Sir_John_Balman,

Here is how the Fieldset component is supposed to look like: Blazor fieldset component

I suspect that some other CSS file interferes with the appearance. You can use your browser's developer tools to inspect what CSS rules apply to the fieldset in your application (or try commenting out various CSS files).

Turns out it was the version of bootstrap that came when VS generated blazor project

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

When I grabbed my static file from the old razor page application

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>

it started working not sure if this is best practice going forward thou :frowning:

Not sure what you need Bootstrap for in particular, but instead of including a separate standalone bootstrap.css you can use Radzen themes that include some vital parts of Bootstrap (mostly layout). To use a theme bundled with Bootstrap, include the theme file without the -base suffix:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">

doesn't work either way I have to remove the bootstrap reference or use my older one which seems to be the version

if use the newer one it overrides the legend

I used it for the out-the-box theming the blazor comes with so I can tweak it going forward.

@Sir_John_Balman The legend not loading "correctly" is indeed due to Bootstrap v5 introducing breaking changes in the forms elements. This is the info from bootstrap's docs: <legend>s, like fieldsets, have also been restyled to be displayed as a heading of sorts. Read more about these changes here Reboot · Bootstrap v5.0

While Radzen themes are not dependent on bootstrap, the recommendation in that case would be to stick to Bootstrap v4 if you prefer the standard legend look & feel.

1 Like