html-tabledropdownmudblazorcolumn-widthmudselect

I Want my MudSimpleTable Layout to be Static-Non Changing


My requirement is want my table layout to be fixed. My problem is When I select value in dropdown box,Table column width dynamically changes according to length of selected value in dropdownbox but I want my MudSimpleTable Layout to be static non changing. I have created snippet link of my problem I am facing. Do anyone know how to fix it?


Solution

  • Use static units for max-width on the td for the static column. E.g. max-width:1px; the value just needs to be > 0 and you use the ColGroup>col to control the width of the column. e.g. <col style="width:30%;" />

    I'd also recommend using the preexisting templates such as MudTd,MudTh.

    <MudTable Items="@Elements">
        <ColGroup>
            <col style="width: 60px;" />
            <col />
            <col style="width:30%;" />
            <col style="width: 60%;" />
            <col style="width: 60px;" />
            <col />
        </ColGroup>
        <HeaderContent>
            <MudTh>Nr</MudTh>
            <MudTh>Sign</MudTh>
            <MudTh>Name</MudTh>
            <MudTh>Position</MudTh>
            <MudTh Style="text-align:center">Molar mass</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Nr">@context.Number</MudTd>
            <MudTd DataLabel="Sign">@context.Sign</MudTd>
            <MudTd Style="max-width:1px;">
                <MudSelect T="LookupItem"  Variant="Variant.Filled" Clearable="true" @bind-Value="selectedLookupItem">
    
                    @foreach (var lup in lookups)
                    {
                        <MudSelectItem T="LookupItem" Value="lup">@lup.LookupDisplayValue</MudSelectItem>
                    }
    
                </MudSelect>
            </MudTd>
            <MudTd DataLabel="Name">@context.Name</MudTd>
            <MudTd DataLabel="Position">@context.Position</MudTd>
            <MudTd DataLabel="Molar mass" Style="text-align:right">@context.Molar</MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager />
        </PagerContent>
    </MudTable>
    

    MudBlazor snippet demo