Css not aligned with MudBlazor

[antonKrizmanic]

trafficstars

It looks like some css margin/paddings are not aligned with mud blazor project. I think when 7.0.0 was published it was ok (but not 100% sure)

Setup MudBlazor version: 7.12.0 CodeBeam.MudBlazor.Extensions version: 7.0.2

Code example

<MudGrid>
    <MudItem lg="4">
<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
    </MudItem>
    <MudItem xs="12" sm="4" Class="d-flex gap-4">
        <MudSelectExtended MultiSelection="true" ItemCollection="_states" SearchBox="true" T="string" Label="Standard Search" Variant="Variant.Outlined" />        
    </MudItem>
</MudGrid>

@code {

    public string TextValue { get; set; }    

    private string[] _states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

    private bool SearchItems(string value, string searchString)
    {
        if (searchString == "")
        {
            return true;
        }

        if (value.StartsWith(searchString, StringComparison.CurrentCultureIgnoreCase))
        {
            return true;
        }

        return false;
    }
}

Image

[w3ori]

This is still an issue with MudBlazor 8.3.0. I would like to use multiple inputs, both MudSelectExtended and MudSelect, but it is not possible to put them into the same row because of the style differences. Is it planned to align the CSS with MudBlazor v8?

[w3ori]

For example the Typo is differend: subtitle1 vs body1

[mckaragoz]

It should be work with last release (8.1.0). Please re-open this issue if you see same problem.

[w3ori]

MudSelectExtended and MudSelect have different height in 8.1.0 when selection is cleared.

@mckaragoz

[mckaragoz]

Well, i can't reproduce that, tried on an example and click the clear icon but the height remains same. Could you check it again?

[w3ori]

Well, i can't reproduce that, tried on an example and click the clear icon but the height remains same. Could you check it again?

Yes I will check on next week.

[w3ori]

Well, i can't reproduce that, tried on an example and click the clear icon but the height remains same. Could you check it again?

Try to paste this code.

Versions:

• Mudblazor 8.6.0
• CodeBeam.MudBlazor.Extensions 8.2.0

<MudStack Row>
    <MudSelectExtended MultiSelection ItemCollection="_states" SearchBox="true" T="string" Label="Standard Search" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" SearchBoxClearable Clearable />
    <MudDatePicker @bind-Date="@date" Variant="Variant.Outlined" Clearable/>
</MudStack>

<MudDivider Class="my-5"/>

<MudStack Row>
    <MudSelectExtended T="string" ItemCollection="_states"
                       Placeholder="Placeholder" Label="Label" SearchBoxPlaceholder="SearchBoxPlaceholder"
                       SearchBox="true" SearchBoxAutoFocus="true" MultiSelection="true" Clearable SelectAll SearchBoxClearable="true"
                       SelectAllText="Select all" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined"
                       MaxHeight="400">
    </MudSelectExtended>

    <MudDatePicker @bind-Date="@date" PickerVariant="PickerVariant.Dialog" Label="Label"
                   Placeholder="Placeholder" Variant="Variant.Outlined" Clearable />
</MudStack>

@code {
    DateTime? date = DateTime.Today;

    private string[] _states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

}

On the first example the Label modifies the position. On the second, the height is different.

[w3ori]

@mckaragoz can you reproduce this?

[mckaragoz]

@mckaragoz can you reproduce this?

It's not a extension issue. It's about MudDatePicker. When you use the core MudSelect component, you have same visual problem.

<MudStack Row>
    <MudSelect MultiSelection T="string" Label="Standard Search" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" Clearable>
        @foreach (var item in _states)
        {
            <MudSelectItem Value="@item">@item</MudSelectItem>
        }
    </MudSelect>
    <MudDatePicker @bind-Date="@date" Variant="Variant.Outlined" Clearable/>
</MudStack>

Could you check with the core component also?

[w3ori]

I tried with MudSelect, same problem. And in first row first MudSelectExtended the Label is not displayed until I select one, it is like a Placeholder.

<MudStack Row>
    <MudSelectExtended MultiSelection ItemCollection="_states" SearchBox="true" T="string" Label="MudSelectExtended" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" SearchBoxClearable Clearable />
    <MudSelect T="string" Clearable Variant="Variant.Outlined" Placeholder="MudSelect" />
    <MudDatePicker @bind-Date="@date" Variant="Variant.Outlined" Clearable/>
</MudStack>

<MudDivider Class="my-5"/>

<MudStack Row>
    <MudSelectExtended T="string" ItemCollection="_states"
                       Placeholder="Placeholder" Label="MudSelectExtended" SearchBoxPlaceholder="SearchBoxPlaceholder"
                       SearchBox="true" SearchBoxAutoFocus="true" MultiSelection="true" Clearable SelectAll SearchBoxClearable="true"
                       SelectAllText="Select all" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined"
                       MaxHeight="400">
    </MudSelectExtended>

    <MudSelect T="string" Clearable Variant="Variant.Outlined" Placeholder="MudSelect" Label="MudSelect" />

    <MudDatePicker @bind-Date="@date" PickerVariant="PickerVariant.Dialog" Label="MudDatePicker"
                   Placeholder="Placeholder" Variant="Variant.Outlined" Clearable />

</MudStack>

@code {
    DateTime? date = DateTime.Today;

    private string[] _states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

}

[mckaragoz]

As i said it's a MudDatePicker problem, because other components (MudTextField, MudSelect etc.) compatible with each other.

So it's better that you open an issue in core library that send this MudSelect and MudDatePicker code with a try.mudblazor.com link.

I'm closing this issue currently. Thanks for the info. If there is something that MudSelect can do but MudSelectExtended can't, please tell.

[w3ori]

As i said it's a MudDatePicker problem, because other components (MudTextField, MudSelect etc.) compatible with each other.

So it's better that you open an issue in core library that send this MudSelect and MudDatePicker code with a try.mudblazor.com link.

I'm closing this issue currently. Thanks for the info. If there is something that MudSelect can do but MudSelectExtended can't, please tell.

I tried your suggestion, and placed both MudDatePicker and MudSelect into the same row on the try.mudblazor.com site and I don't see any height difference. I don't really see the MudDatePicker compatibility problem. Can you point it out a bit more? Thanks

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

[mckaragoz]

Yes, it has different height with Placeholder. Lets investigate why.

[w3ori]

I'm sure it's my mistake, but I don't understand what you mean by 'height difference'. To me, they look the same height.

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

[mckaragoz]

Try with MudSelectExtended with placeholder.

[w3ori]

I tested again, so the MudSelectExtended has a greater height.

These two line makes some difference. I don't know what we should change, but these modifies the height.

[mckaragoz]

Good catch. There was 2 bugs that one we fixed with previous release. This one is about placeholder and fixed also.

I added https://mudextensions.codebeam.org/visualtest (ghost) page that you can try with different visual options. Don't forget to refresh cache with ctrl+f5.

[w3ori]

Thanks for your quick help.