css Question posted in
Some basic documentation can be found here.

Css – MudBlazor MudGrid Spacing after breakpoints

I’m trying to create a responsive Blazor page using MudBlazor and MudGrid. A basic representation of this issue is:

<MudGrid>
    <MudItem xs="12" lg="6">
        <MudTextField Value="@value" HelperText="Label 1" Variant="Variant.Outlined" />
    </MudItem>

    <MudItem xs="12" lg="6">
        <MudTextField Value="@value" HelperText="Label 2" Variant="Variant.Outlined" />
    </MudItem>

    
</MudGrid>

<MudTextField Value="@value" HelperText="Label 3" Variant="Variant.Outlined" />

<MudTextField Value="@value" HelperText="Label 4" Variant="Variant.Outlined" />

@code {
    private string value = "Text Value";
}

At the larger viewport, this displays as expected:

enter image description here

but when you break under the large viewport, it creates a wider gap between the two fields in the grid, such as:

enter image description here

I am expecting the spacing to be equal across the four fields otherwise it looks odd on a smaller screen and the idea of breaking to be efficient use of screen space.

If I use the Bootstrap Flex grid the spacing is as expected but I don’t want to mix frameworks and I’m pretty far down the road on MudBlazor.

Here is a try link:

https://try.mudblazor.com/snippet/cuQeErmPpLzsAQuP

I’ve been playing around with the CSS around .mud-grid-item but it messes with the fields on lines that aren’t broken and the helper text ends up sitting on top of the field below.

Any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to RBee's reply, to clarify the accepted solution that is discussed in the comments:

    Set provides the right behaviour horizontally and only pads the space by 4px which is visually acceptable.


  2. 0

    You can use Spacing property of MudGrid to change the spacing. The default is set to 6. Setting it to 0 will remove it.

    Then you can override some of the spacing by adding your own CSS to the MudGrid

    <style>
    .mud-grid-custom-spacing{
        margin-top:0px !important;
        margin-left: -4px !important;
    }
    .mud-grid-custom-spacing >.mud-grid-item{
        padding-left: 4px !important;
        padding-top: 0px !important;
        
    }
</style>

<MudGrid Class="mud-grid-custom-spacing" Spacing="0">
    <MudItem xs="12" lg="6">
        <MudTextField Value="@value" HelperText="Label 1" Variant="Variant.Outlined" />
    </MudItem>

    <MudItem xs="12" lg="6">
        <MudTextField Value="@value" HelperText="Label 2" Variant="Variant.Outlined" />
    </MudItem>

    
</MudGrid>

<MudTextField Value="@value" HelperText="Label 3" Variant="Variant.Outlined" />

<MudTextField Value="@value" HelperText="Label 4" Variant="Variant.Outlined" />

@code {
    private string value = "Text Value";
}

    MudBlazor custom spacing snippet

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search