Search code examples
blazormudblazor

How to define proportions in MudBlazor stack?

I copied a stack example with 3 paper elements from MudBlazor and change their size proportions so the last one is longer:

<MudStack Row="true">
    <MudPaper Class="px-1">Item 1</MudPaper>
    <MudPaper Class="px-1">Item 2</MudPaper>
    <MudPaper Class="px-10">Item 3</MudPaper>
</MudStack>

But I have two problems with this:

  • even for this simple code the last item is not 10 times longer than any of the other items, it is longer, but not much,
  • when I try to use other components like MudSelect or MudTextField as stack elements it does not work. The size is evenly distributed between elements

So how to express in general the notion "make Kth element N times wider/higher than Lth one"?

Assuming it is doable using stack.

Solution

  • px-1 is CSS Utility class where p is for padding and x is for the x-axis. And padding can't be used to achieve your desired behavior as it is only relative to the content and it's borders.

    To set the width and height of components you will need to change the width/height attributes of the component's elements by either using the Style property of the component or for some components like MudPaper, the Width/Height are exposed as parameters for you to use. Although you can still also simply use the Style property for these aswell.

    <MudStack Row="true">
    <MudPaper Class="px-1" Width="@($"{_width}px")">Item 1</MudPaper>
    <MudPaper Class="px-1" Width="@($"{_width*2}px")">Item 2</MudPaper>
    <MudPaper Class="px-1" Width="@($"{_width*10}px")">Item 3</MudPaper>
</MudStack>

<MudStack Row="false">
    <MudTextField Style="@($"width:{_width}px")" @bind-Value="TextValue" Label="1x" Variant="Variant.Text"></MudTextField>
    <MudTextField Style="@($"width:{_width*2}px")" @bind-Value="TextValue" Label="2x" Variant="Variant.Text"></MudTextField>
    <MudTextField Style="@($"width:{_width*3}px")" @bind-Value="TextValue" Label="3x" Variant="Variant.Text"></MudTextField>
</MudStack>
@code{
    int _width = 200;
    public string TextValue { get; set; }
}

    MudBlazor snippet