css.net-8.0mudblazorhybridmaui-blazor

MudBlazor: How to align left/stretch MudStack's (MudContainer) items in MAUI Blazor Hybrid App


I'm preparing an outline for a custom form using MudBlazor components in .NET8 MAUI Blazor Hybrid App. When using https://try.mudblazor.com/snippet/QOmoaXYXJzLgAEtS

<h3>Test Outline</h3>

<MudPaper Outlined="true" Spacing ="1" 
        Style="background-color:aquamarine;padding:10px 10px 10px 10px;">
    <MudStack 
            Elevation="1" Row="false"
            Style="background-color:moccasin;padding:10px 10px 10px 10px;align-items:stretch"
            Outlined="true">
    <MudContainer Gutters="false" Outlined="true" Height="50px">
        <MudGrid Spacing="1" Elevation="1">
        <MudItem>  
            <MudPaper Outlined="true">Section 1</MudPaper>
        </MudItem>
        <MudItem>  
            <MudPaper Outlined="true">Section 2</MudPaper>
        </MudItem>
        <MudItem>  
            <MudPaper Outlined="true">Section 3</MudPaper>
        </MudItem>
        </MudGrid> 
    </MudContainer> 

    <MudContainer Gutters="false" Outlined="true" Height="50px">
            <MudStack Spacing="1" Elevation="1">
                <MudPaper Height="140px"  Outlined="true">
                Main Table  
                </MudPaper>
                <MudPaper Height="20px" Outlined="true">
                Ready
                </MudPaper>
            </MudStack>
        </MudContainer>

    </MudStack>
</MudPaper>

everything works fine (see pictures (1) and (2)). And when using the same .razor page's markup in a .NET8 MAUI Blazor Hybrid App then MudStack's MudContainer elements have large empty margins on the left and the right sides - see picture (3).

How to fix the https://try.mudblazor.com/snippet/QOmoaXYXJzLgAEtS markup to have its MudContaners' stretched in MAUI Blazor Hybrid App the same way as on try.mudblazor.com?

Pictures:

Picture (1)

Picture (2)

Picture (3)


Solution

  • And when using the same .razor page's markup in a .NET8 MAUI Blazor Hybrid App then MudStack's MudContainer elements have large empty margins on the left and the right sides

    To remove the large empty margins on the left, you need to set the Align Content to align-content-start which will control the row to left side, so just add Class="d-flex align-content-start flex-wrap flex-grow-1 " to <MudStack> like below. For the right margins, I think it's defined by the actual width of the items you place, you can't eliminate it.

    <MudPaper Outlined="true" Spacing="1"
              Style="background-color:aquamarine;padding:10px 10px 10px 10px;">
    
        <MudStack Elevation="1" Row="false"
    
                  Class="d-flex align-content-start flex-wrap flex-grow-1 "
    
                  Style="background-color:moccasin;padding:10px 10px 10px 10px;align-items:stretch"
                  Outlined="true">
    

    For more details, you can refer to https://mudblazor.com/utilities/justify-content#class-reference.