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

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

cssblazor-server-side.net-6.0mudblazor


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quickz

Related Questions