Defect #43591
closed
Context menu is hidden behind sidebar in RTL layout
Added by Yasu Saku 24 days ago.
Updated 1 day ago.
Description
In RTL environments, the context menu does not display correctly.
When the menu is opened near the left edge of the screen, it may be partially hidden behind the sidebar or extend beyond the visible area of the page.
For example
Files
Simple solution for this problem is as follows:
html[dir="rtl"],
html:has(head link[rel="stylesheet"][href*="/rtl"]) {
.contextual .drdn-content {
inset-inline-start: auto;
inset-inline-end: 0;
a.icon {
padding-inline-start: 24px;
padding-inline-end: 0;
background-position-x: calc(100% - 4px);
/* For Redmine 6 and lator */
&:has(svg) {
padding-inline-start: 0;
}
}
}
}
Yasu Saku wrote in #note-1:
Simple solution for this problem is as follows:
[...]
Sorry, this solution does not handle submenus in the context menu.
- Status changed from New to Confirmed
I propose another solution. The attached patch only replaces the CSS right and margin-left/right properties with inset-inline-end and margin-inline-start/end. Because the patch does not rely on checking html[dir="rtl"] or link[rel="stylesheet"], I believe this approach is simpler than the patch suggested in #note-2.
- Related to Feature #43515: Improve RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties added
- Subject changed from Context Menu Is Not Displayed Correctly in RTL Layout to Context menu is hidden behind sidebar in RTL layout
- Status changed from Confirmed to Resolved
- Assignee set to Go MAEDA
- Resolution set to Fixed
- Status changed from Resolved to Closed
Merged the change into 6.1-stable branch in r24250.
- Related to deleted (Feature #43515: Improve RTL layouts by removing rtl.css and integrating its overrides into application.css using CSS logical properties)
Go MAEDA
Thank you for your continued support.
Also available in: Atom
PDF
Updated by 
Updated by