ContextMenu position

Radzen.Blazor Components
1

Hi there, I have a contextmenu launching via a button click as shown here :

    <RadzenButton Variant="Variant.Text"
                  Size="ButtonSize.ExtraSmall"
                  Click="@ShowTableMenu">
        <RadzenIcon Icon="settings"
                    IconColor="var(--rz-primary)"
                    class="mira-icon-fill" />
    </RadzenButton>
@code{
 private void ShowTableMenu(MouseEventArgs args)
 {
     var items = new List<ContextMenuItem>
     {
         new() { Text = "Clear filters", Value = 1 },
         new() { Text = "Reset grid", Value = 2 }
     };

     ContextMenu.Open(args, items, OnMenuItemClick);
 }
}

The stack containing the button is in the bottom corner of the viewport so when the context menu opens it expands the DOM viewport size with scrollbars. Is there a way to control the location/position of the context menu when it pops up ?

2

Your code works as expected in our online demos. Make sure <RadzenComponents /> is not inside some positioned element as this would affect the positioning.
context-menu

3

Right, but that button in my example is in the bottom right of the page, and the context menu opens from the bottom right of the button, thus expanding the view port. is there a way to allow the menu to open above the button, or to the left ?

4

This happens automatically.
context-menu

Check where <RadzenComponents /> is placed in your layout.

6

This means something in your app prevents the context menu from positioning correctly. Can't tell what from a screenshot though.

If you have a subscription you can send us your application to info@radzen.com.

7

RadzenComponents appears above my RadzenLayout tag in my MainLayout

8 
<RadzenTabs>
    <Tabs>
        <RadzenTabsItem>
        <RadzenStack Orientation="Orientation.Horizontal"
                     Gap="0.5rem"
                     AlignItems="AlignItems.Center"
                     JustifyContent="JustifyContent.Right">

            <RadzenText TextStyle="TextStyle.Caption"
                        Style="color: var(--rz-primary); margin-bottom:0;"
                        Text="Mosaiq.ConnectionInfo.DbHost" />

            <RadzenButton Variant="Variant.Text"
                          Size="ButtonSize.ExtraSmall"
                          Click="@ShowTableMenu">
                <RadzenIcon Icon="settings"
                            IconColor="var(--rz-primary)"
                            class="mira-icon-fill" />
            </RadzenButton>
        </RadzenStack>
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>
</RadzenCard>

Hi there, the issue seems to only occur when inside of a RadzenTabsItem. Any idea why this element is causing this ?

9

Hey any ideas about why the RadzenTabsItem would cause this problem ?