[Sider, Menu] Launched app shows three dots on items in collapsed menu

[Arsync]

When app is just launched, there is three dots right of icon. But if toggle to expand and then collapse, it magically disappear and shows only icon. If we take a look at page source, each item initially has attribute style="padding-left:24px; ". After expand and collapse by sider trigger all items has style=" ". How to remove initial auto-padding?

Source:

<Sider Collapsible="true" Collapsed="true" Theme="SiderTheme.Light">
    <Menu Mode="MenuMode.Inline">
        @foreach (var area in ProfileState.Value.AllowedAreas)
        {
            <MenuItem
                RouterLink="@area"
                RouterMatch="NavLinkMatch.Prefix"
                OnClick="() => OnAreaClick(area)"  
            >
                <Icon Type="pie-chart" Theme="outline" />
                <span>@area</span>
            </MenuItem>
        }
    </Menu>
</Sider>

Second question: when sider is collapsed (with the same code above), if we hover on items and then expand menu, some li will have "padding-left:24px;" and some li have empty style:

<li class="ant-menu-item" role="menuitem" style=" " _bl_11="">
<li class="ant-menu-item" role="menuitem" style="padding-left:24px; " _bl_12="">

It will cause bad look.

[ElderJames]

Hello @Arsync , could you please provide a demo to reproduce the issue?

[Arsync]

Hello @ElderJames, I've created one: https://github.com/Arsync/AntDesignSiderDots
Its just the copy from official examples, placed entirely in Shared/MainLayout.razor. Collapsed by default.

[ElderJames]

please try remove the Collapsed from <Sider Collapsible Collapsed>

[Arsync]

Without Collapsed it starts expanded. But our designers expects it to be collapsed initially

[ElderJames]

I have fixed in #3268 , please wait for next release.