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 MudContaner
s' stretched in MAUI Blazor Hybrid App the same way as on try.mudblazor.com
?
Pictures:
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.