For MudBlazor component MudSelect, how do I get selected value to align in the center?

user_92760 0
Viewed 788

I have a very simple drop down, a MudSelect, which is working fine. When you list the choices they align fine in the middle, but I do not know how to get the selected value to align in the middle. If I set Style="text-align: center" on the MudSelect itself, the selected value is still aligned to the left. This does not look very nice on a wide device.

    <MudSelect @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter">
        <MudSelectItem T="int" Value="1" Style="text-align: center"/>
        <MudSelectItem T="int" Value="2" Style="text-align: center"/>
        <MudSelectItem T="int" Value="3" Style="text-align: center"/>
        <MudSelectItem T="int" Value="4" Style="text-align: center"/>
        <MudSelectItem T="int" Value="5" Style="text-align: center"/>
        <MudSelectItem T="int" Value="6" Style="text-align: center"/>
        <MudSelectItem T="int" Value="7" Style="text-align: center"/>
        <MudSelectItem T="int" Value="8" Style="text-align: center"/>
        <MudSelectItem T="int" Value="9" Style="text-align: center"/>
        <MudSelectItem T="int" Value="10" Style="text-align: center"/>
    </MudSelect>

Does anyone know how to align the selected value in the center for this component? I have read through the API documentation, but I still don't understand how to do it (and my CCS skills are limited).

.net-6.0 mudblazor blazor-server-side css
1 Answers

Add a CSS class that targets the input tag inside your MudSelect component and assign the text alignment through there.

Example

Here's a modified version of your code:

<style>
    .center-mud-dropdown input {
        text-align: center;
    }
</style>

<MudSelect class="center-mud-dropdown" @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter" Style="text-align: center">
    <MudSelectItem T="int" Value="1" Style="text-align: center"/>
    <MudSelectItem T="int" Value="2" Style="text-align: center"/>
    <MudSelectItem T="int" Value="3" Style="text-align: center"/>
    <MudSelectItem T="int" Value="4" Style="text-align: center"/>
    <MudSelectItem T="int" Value="5" Style="text-align: center"/>
    <MudSelectItem T="int" Value="6" Style="text-align: center"/>
    <MudSelectItem T="int" Value="7" Style="text-align: center"/>
    <MudSelectItem T="int" Value="8" Style="text-align: center"/>
    <MudSelectItem T="int" Value="9" Style="text-align: center"/>
    <MudSelectItem T="int" Value="10" Style="text-align: center"/>
</MudSelect>

@code {
    private int NumberOfRounds { get; set; }
}

https://try.mudblazor.com/snippet/QaGcYIPIhHGGYjhU

user_59460940
Related