Skip to content

Commit 9d2fbeb

Browse files
committed
fix: open a title-bar dropdown under its own button
The right-alignment guard added for title-bar dropdowns pinned the panel with `right: 0`, but `div.dropdown_menu` is unpositioned (AA leaves it `display: inline`) and the theme resets `#titlebar_right` to static — so the panel resolved against `#title_bar` instead and every menu opened at the bar's far right, under whichever action item happens to sit last. Only bars with a dropdown that is not the rightmost item showed it. Make the dropdown its own containing block, so `right: 0` means the trigger's right edge. inline-block over AA's `display: inline`: an inline box's containing block spans its text fragments, and the whitespace around the button in the markup pushed the panel a few pixels past it. The nipple is pinned right for the same reason - AA offsets the arrow from the panel's left edge by the button's centre, which lands it on empty bar once the panel is right-aligned. The dummy app's wide table now carries four action items, two of them dropdowns, one of those in the middle - the shape that reproduces it.
1 parent ba08948 commit 9d2fbeb

2 files changed

Lines changed: 46 additions & 10 deletions

File tree

‎app/assets/stylesheets/wigu/active_admin_theme.scss‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -768,17 +768,26 @@ body.active_admin {
768768
}
769769
}
770770
div.dropdown_menu {
771+
// Containing block for the panel below, so `right: 0` means "the
772+
// trigger's right edge". AA leaves this element unpositioned, which
773+
// makes the panel resolve against #title_bar (sticky) and park at the
774+
// bar's far right no matter which action item was clicked. inline-block
775+
// over AA's `display: inline`: an inline box's containing block spans
776+
// its text fragments, so the markup's whitespace around the button
777+
// pushed the panel a few px past the button's edge.
778+
position: relative;
779+
display: inline-block;
771780
div.dropdown_menu_list_wrapper {
772-
// Always right-align title-bar dropdowns, overriding AA's inline
773-
// positioning. AA 3.x's _position() sets inline `left` OR `right`
774-
// per open depending on a window-geometry branch and never clears
775-
// the other, and the wrapper persists across opens — after a resize
776-
// between opens both offsets accumulate and the width:auto wrapper
777-
// stretches from the stale left coordinate to the right edge.
778-
// Title-bar action items sit at the bar's right edge, so pinning
779-
// right is also simply the correct alignment. Consumer apps used to
780-
// carry exactly this pair as a local hotfix; the theme owns the bar
781-
// now, so it owns the guard.
781+
// Always right-align title-bar dropdowns under their own button,
782+
// overriding AA's inline positioning. AA 3.x's _position() sets
783+
// inline `left` OR `right` per open depending on a window-geometry
784+
// branch and never clears the other, and the wrapper persists across
785+
// opens — after a resize between opens both offsets accumulate and
786+
// the width:auto wrapper stretches from the stale left coordinate to
787+
// the right edge. Its `right` branch is wrong here anyway: it offsets
788+
// from the window, not from the bar. Consumer apps used to carry
789+
// exactly this pair as a local hotfix; the theme owns the bar now, so
790+
// it owns the guard.
782791
left: auto !important;
783792
right: 0 !important;
784793
background-color: var(--aa-elevated);
@@ -791,6 +800,12 @@ body.active_admin {
791800
// that is invisible whenever the panel fill is close to the page —
792801
// which is exactly what a light surface is. Outline it like the panel.
793802
div.dropdown_menu_nipple {
803+
// The panel is pinned right (above) while AA still offsets the
804+
// arrow from the panel's LEFT edge by the button's centre, which
805+
// lands it on empty bar. Pin it right too, centred on the button's
806+
// own caret (AA draws that 6px wide at right: 12px).
807+
left: auto !important;
808+
right: 9px !important;
794809
border-color: var(--aa-border) transparent;
795810
&:before, &:after { border-color: var(--aa-elevated) transparent; }
796811
}

‎test/dummy/app/admin/wide_table.rb‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,29 @@
44
ActiveAdmin.register_page "Wide table" do
55
menu priority: 4
66

7+
# A bar with several action items, including a dropdown that is NOT the last
8+
# one: its panel has to open under its own button. While .dropdown_menu was
9+
# unpositioned the panel resolved against #title_bar (sticky) instead and
10+
# every menu parked at the bar's right edge, under the wrong button.
11+
action_item(:edit_record) { link_to "Edit record", "#" }
12+
13+
action_item(:actions_menu) do
14+
dropdown_menu "Actions" do
15+
item "First action", "#"
16+
item "Second action", "#"
17+
item "Third action", "#"
18+
end
19+
end
20+
721
action_item(:new_record) { link_to "New record", "#" }
822

23+
action_item(:more_menu) do
24+
dropdown_menu "More" do
25+
item "Export CSV", "#"
26+
item "Export XML", "#"
27+
end
28+
end
29+
930
content do
1031
# Locals, not constants: assignment inside this block is lexically
1132
# top-level (it lands on Object), and AA re-loads every app/admin file on

0 commit comments

Comments
 (0)