I'm trying to create a simple login form with MudBlazor but for some reason it shows up extremely narrow and I can't find any Width
property on components. How do I set the width?
<EditForm Model="@loginModel" OnValidSubmit="OnValidLoginSubmit">
<DataAnnotationsValidator />
<MudGrid>
<MudItem xs="12" sm="7">
<MudPaper>
<MudCardContent>
<MudTextField Label="Username or email"
@bind-Value="loginModel.UsernameOrEmail"
For="@(() => loginModel.UsernameOrEmail)" />
<MudTextField Label="Password" HelperText="Type your password" Class="mt-3"
@bind-Value="loginModel.Password"
For="@(() => loginModel.Password)" InputType="InputType.Password" />
</MudCardContent>
<MudCardActions>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Login</MudButton>
</MudCardActions>
</MudPaper>
</MudItem>
</MudGrid>
</EditForm>
Ideally, I'd like to set some specific width when the screen is wide enough and also set a minimal width down to which components could shrink if the screen is shrinked.
You can use either of these below, if you mean the card width.
<MudCard Style="width:200px">
//or
<MudPaper Width="300px">
For other components, use the Style
property if it doesn't have a Width
property.