starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

RadzenMenu content cropped -- "RadzenStack" => "RadzenMenu" => "RadzenMenuItem" (Fully right aligned) #1017

New Issue
Closed
opened 2026-01-29 17:47:50 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:47:50 +00:00
Owner
Copy Link

Originally created by @stringbean1968 on GitHub (Oct 23, 2023).

A "RadzenStack" with "JustifyContent.End" containing a "RadzenMenu"

When dropped down the RadzenMenu options are left aligned below the button which; when the button is short and "End" aligned in a "RadzenStack"; the content is cropped.

i.e.
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="10" Reverse="false" JustifyContent="JustifyContent.End" Style="padding: 6px;"> <RadzenMenu Click="OnParentClicked"> @if(isLoggedIn) { <RadzenMenuItem Text="Paul" Icon="account_box" > <RadzenMenuItem Text="My Work" Path="card" Icon="line_style"></RadzenMenuItem> <RadzenMenuItem Text="My Details My Details My Details " Path="panel" Icon="content_paste"></RadzenMenuItem> <hr class="RadzenMenuItemSeparator"> <RadzenMenuItem Text="Logout" Icon="tab" Click="@(args => BeginSignOut(args))"></RadzenMenuItem> </RadzenMenuItem> </RadzenMenu> </RadzenStack>
See video

Drop down should not crop. Should be visible on screen

Desktop (please complete the following information):

  • Windows 10
  • Chrome
  • Version 4.19.0

See video

OH... And by the way.. Your controls ROCK. 🥇

https://github.com/radzenhq/radzen-blazor/assets/8776864/851c5990-6d22-4541-abe2-d8aebcd0d7ed

Originally created by @stringbean1968 on GitHub (Oct 23, 2023). A "RadzenStack" with "JustifyContent.End" containing a "RadzenMenu" When dropped down the RadzenMenu options are left aligned below the button which; when the button is short and "End" aligned in a "RadzenStack"; the content is cropped. i.e. ` <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="10" Reverse="false" JustifyContent="JustifyContent.End" Style="padding: 6px;"> <RadzenMenu Click="OnParentClicked"> @if(isLoggedIn) { <RadzenMenuItem Text="Paul" Icon="account_box" > <RadzenMenuItem Text="My Work" Path="card" Icon="line_style"></RadzenMenuItem> <RadzenMenuItem Text="My Details My Details My Details " Path="panel" Icon="content_paste"></RadzenMenuItem> <hr class="RadzenMenuItemSeparator"> <RadzenMenuItem Text="Logout" Icon="tab" Click="@(args => BeginSignOut(args))"></RadzenMenuItem> </RadzenMenuItem> </RadzenMenu> </RadzenStack>` See video Drop down should not crop. Should be visible on screen **Desktop (please complete the following information):** - Windows 10 - Chrome - Version 4.19.0 See video OH... And by the way.. Your controls ROCK. 🥇 https://github.com/radzenhq/radzen-blazor/assets/8776864/851c5990-6d22-4541-abe2-d8aebcd0d7ed
claunia commented 2026-01-29 17:47:50 +00:00
Author
Owner
Copy Link

@ggomarighetti commented on GitHub (Oct 23, 2023):

Try with columns, works for me.

<RadzenRow>
   <RadzenColumn class="rz-text-align-left" />
   <RadzenColumn class="rz-text-align-right"/>
</RadzenRow>
@ggomarighetti commented on GitHub (Oct 23, 2023): Try with columns, works for me. ``` <RadzenRow> <RadzenColumn class="rz-text-align-left" /> <RadzenColumn class="rz-text-align-right"/> </RadzenRow> ```
claunia commented 2026-01-29 17:47:50 +00:00
Author
Owner
Copy Link

@stringbean1968 commented on GitHub (Oct 24, 2023):

Hi,

The rows & Columns approach didn't do the trick, but I've worked around it a bit with some css...

.pauls-menu ul.rz-navigation-menu { right: 0px; }

Then in the RadzenMenu that over flows I've added the class

<RadzenMenu Click="OnParentClicked" Class="pauls-menu">

Fixes my immediate issue for that top-right corner drop-down button.

@stringbean1968 commented on GitHub (Oct 24, 2023): Hi, The rows & Columns approach didn't do the trick, but I've worked around it a bit with some css... ` .pauls-menu ul.rz-navigation-menu { right: 0px; } ` Then in the RadzenMenu that over flows I've added the class `<RadzenMenu Click="OnParentClicked" Class="pauls-menu">` Fixes my immediate issue for that top-right corner drop-down button.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1017
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?