SplitButton popup positioning issue in DataGrid

Radzen.Blazor Components
1

After updating the Radzen to v5.3.1 the SplitButton popup appears outside of the screen.
I have the following layout: SplitButton is at the rightmost position of the pinned column at right. The split button has no text, just icon. Essentially it immitates the 'more' button [...].

When user clicks the button, its popup aligns by the left edge of the split button, which moves almost whole popup content outside of the screen (scroll bar appears).

image
image390×576 10.4 KB

Next time when I click the same button, its popup re-calculates the position and shows all:
image

Is there any way to align popup by right edge of the split button (similar to ProfileMenu popup alignment)?

I can't use the ProfileMenu in my case because it doesn't work in the DataGrid (because of overflow: hidden on the TD).

2 Likes
2

Were you guys able to reproduce this issue? Is there anything I can help you with in order to address this issue?
Verified on 5.6.1 - the issue is still there.
in 5.6.4 its is even worse - the popup now overlaps the split button itself

image
image338×528 11.4 KB

3

Here is what I see in our demos:

image
image1920×1080 231 KB

image
image1920×1080 210 KB

Check our forum FAQ for details on how to improve your report.

4

Here is the column spec that you can add to the demo to reproduce the issue:

        <RadzenDataGridColumn Frozen="true" FrozenPosition="FrozenColumnPosition.Right" Title="Status" Width="50px" class="cell-actions">
            <Template Context="config">
                <RadzenSplitButton Icon="more_horiz" Variant="Variant.Text" AlwaysOpenPopup="true">
                <ChildContent>
                    <RadzenSplitButtonItem Text="Copy" Icon="content_copy" Value="copy" class="rz-menuitem rz-color-primary"/>
                    <RadzenSplitButtonItem Text="Share" Icon="share" Value="share" class="rz-menuitem rz-color-primary"/>
                    <RadzenSplitButtonItem Text="Export" Icon="download" Value="export" class="rz-menuitem rz-color-primary"/>
                    <RadzenSplitButtonItem Text="Delete" Icon="delete" Value="delete" class="rz-menuitem rz-color-danger-dark"/>
                </ChildContent>
                </RadzenSplitButton>
            </Template>
        </RadzenDataGridColumn>

additionally I've added a class cell-actions that hides the dropdown arrow:

.cell-actions .rz-splitbutton-menubutton {
    display: none;
}

If there is a room at the right side of the grid, popup shows up
if you make the window small enough so there are no space at the right of the grid, the popup position is weird.

5

This is not valid code and cannot be compiled, here is the behavior using latest update:

image
image1920×1080 218 KB

6

class="cell-actions" works well for me

image
image1850×808 118 KB

I use this class to hide rz-splitbutton-menubutton part of the split button.

Essentially all I need is a button that toggles the popup that is aligned at the right side of my button (similar to ProfileMenu, which I cannot use, see the very first message).
It looks like I need to implement it without using Radzen components.

7

Wow! In 5.6.8, the popup is positioned much better - it doesn't go outside the screen.
Thanks!