Search code examples
c#blazorwebassemblymudblazor

How to set width for MudBlazor form?


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.


Solution

  • 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.