How to horizontal scroll a menu on mobile optimised app whilst keeping the header above and body below frozen

michael47 · 2025-01-26T22:21:13.675Z

IMG_07351179×2556 88.8 KB

IMG_07341179×2556 119 KB

IMG_07371920×1440 109 KB

IMG_07361920×2560 306 KB

Timbo · 2025-01-26T22:22:40.776Z

Give the group an ID attribute like: Dash-Menu
That goes in the group Appearance section at the bottom if exposed.

try this in a html on the page.

Style before

#Dash-Menu { overflow-x: auto !important; flex-wrap: nowrap !important; }

/Style after

And change your min width to 300 on your group.

Screenshot 2025-01-26 at 11.24.43 pm611×432 24.1 KB

michael47 · 2025-01-26T22:51:17.844Z

Thanks for the reply.

I’ve added as you’ve suggested and it looks close to working now. Is it being restricted by a parent group you think?

IMG_07391179×2556 134 KB

michael47 · 2025-01-26T23:42:59.418Z

Ok it works, but only when I increase the minimum width of each of the menu text boxes.

Otherwise it abbreviates “(sub…)”

Is there a way we can get this fixed so the fit width to content check box works again? This will be helpful as I’ll use this technique in a number of places across the app.

image3024×4032 3.62 MB

IMG_07421179×2556 139 KB

Thanks for the help so far!

Timbo · 2025-01-27T00:22:01.747Z

put a max height of 40 on the main group those little ones are sat in and position that main group row to left.