Skip to content

Lay date-range filters out with flexbox so long labels don't wrap the inputs - #70

Merged
Fivell merged 1 commit into
masterfrom
fix/date-range-filter-layout
Oct 13, 2026
Merged

Fivell merged 1 commit into
masterfrom
fix/date-range-filter-layout

Conversation

@Fivell

@Fivell Fivell commented Oct 13, 2026

Copy link
Copy Markdown
Member

The date-only range filter (two input.datepicker fields) gets no width from the base CSS, so the inputs relied on their size=12 intrinsic width and lined up side by side only by luck. The label's float:right "Set range" link then leaked into the input band on a longer label (e.g. "Customer registration date") and bumped the "To" input onto a second line. Flexbox puts the label on its own row and lets the two inputs share the next, immune to the float. Apps that use this theme each carried their own version of this fix (one flexbox, one calc() + !important); this moves it into the theme for all of them.

… inputs

The date-only range filter (two input.datepicker fields) gets no width from
the base CSS, so the inputs relied on their size=12 intrinsic width and only
lined up by luck; the label's float:right 'Set range' link leaked into the
input band on a longer label and pushed the 'To' field onto a second line.
Flexbox lays the label on its own row and lets the two inputs share the next,
immune to the float. Consumers previously each carried their own fix (one with
flexbox, one with calc widths + !important); this owns it for all of them.
@Fivell
Fivell merged commit e93a418 into master Oct 13, 2026
3 checks passed
@Fivell
Fivell deleted the fix/date-range-filter-layout branch October 13, 2026 16:41
@Fivell Fivell mentioned this pull request Oct 20, 2026
senid231 pushed a commit to senid231/active_admin_theme that referenced this pull request Nov 4, 2026
Minor, not major: the variable contract only grows - $skinTitleBarHeight
joins it - and nothing that worked against 3.1.1 stops working. Several
defaults do look different, and the Upgrading section now spells them out.

What moved since 3.1.1:

  activeadmin-plugins#74  a title-bar dropdown opens under its own button again
  activeadmin-plugins#73  button_to action items stay on the title bar's row
  activeadmin-plugins#72  a wigu/all umbrella require; title-bar dropdowns right-align
  activeadmin-plugins#71  the header, title bar and flash bar are pinned to the viewport and
       index-table headers stick, with per-table opt-outs
  activeadmin-plugins#70  date-range filters laid out with flexbox
  activeadmin-plugins#69  documentation for crisscross highlighting and the Trix editor
  activeadmin-plugins#68  crisscross cell highlighting for index tables
  activeadmin-plugins#67  Trix / ActionText editor themed in light and dark
  activeadmin-plugins#65  --aa-datetimepicker-* bridge variables
  activeadmin-plugins#64  utility nav with the server clock, theme switch and glyph logout
  activeadmin-plugins#63  dark-mode interactive states
  activeadmin-plugins#62  dark styling for select2 and tom-select

The npm package moves with it: src/ is regenerated from app/assets by the
prepare script, so the Sprockets and bundler consumers ship the same files.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant