How do you remove the excess space in a FieldSet

Radzen.Blazor Components
1

How would I remove the excess space between the FieldSet component's outline and the child text within?

1 Like
2

You can do that with CSS. Use your browser element inspector to check which class should be modified.

3

how did you solved it?
i tried this in the page.razor.css, but didnt worked:

.rz-fieldset-legend{
  margin-bottom: 0;
}
4

There are several different elements that I had to address to make this do what I wanted. I had to go globally on mine to make it do what was needed. The rz-expander-content, rz-fieldset-content and the rz-fieldset-legend got the spacing taken care of for me. Not sure how to handle the rz-expander-content on an as needed basis though.

/* Global Fieldset Stylization*/
.rz-fieldset {
    background-color: #f8f8ff !important;
    border: 1px solid #a3a3ff !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}  
.rz-expander-content,    
.rz-fieldset-content {
    padding-top: 0px !important;
    padding-right: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
}
    .rz-fieldset legend {
       margin-bottom: 0 !important;
        
    }
    .rz-fieldset content-wrapper {
        padding: 0 !important;
        margin: 0.25rem !important;
    }
5

Gemini suggested the following when asked for an “in-page” solution to avoid having to change general style-sheets.

<style>
    #tight-fieldset .rz-fieldset-content {
        padding: 0px !important;     /* put your preferred padding here */
    }
</style>
<!-- further down on the same page -->
<div id="tight-fieldset">    
   <RadzenFieldset ...>
   </RadzenFieldset>
</div>

It might not be proper HTML because of the placement of the Style tag, but it worked on both Chrome and Edge when I tested. Thus, use with caution.