Scroll on reduced size menu

paul.wilson · 2025-01-24T10:31:31.868Z

Recording 2025-01-24 102849
Hi everyone!

Can anybody advise how to remove the horizontal scroll when the floating group (menu) to the left is reduced in size?

I’ve tried adding the below CSS, but that didn’t work.

#menu { overflow-x: hidden; /* Hides the horizontal scrollbar */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ scrollbar-width: none; /* For Firefox */ } #menu::-webkit-scrollbar { display: none; /* For Chrome, Safari, and Opera */ }

paul.wilson · 2025-01-27T13:26:37.328Z

Anybody? I’ve still not managed to figure out a fix for this…

ahmed.elkaffas · 2025-01-27T13:48:25.314Z

Is there any fixed width or Min width for this menu or any of its menu items ?

yanevangelista · 2025-01-27T13:51:21.053Z

Check the width of the buttons and image on the top. One of them ( or all of them) probably have a min width or fixed width bigger than the menu width

paul.wilson · 2025-01-27T13:52:05.791Z

Hi, yes, the menu is fixed width and the menu items are the same. Is this why I’m seeing the problem?
I went with a fixed approach and hid on slide as the UI felt cleaner and less laggy (for want of a better word).

ahmed.elkaffas · 2025-01-27T13:54:48.078Z

Yes that’s the reason why you see this problem. You need to have your menu and all its items without any Min width or fixed width. It has to be totally responsive.

paul.wilson · 2025-01-27T14:03:36.299Z

Thanks for the feedback. Can you think of a better way to avoid the visibility delay as seen in the dashboard text here? At the moment, I’ve got it to not be visible when the floating group width < 200. Anything less than that and it jumps down to the row below when its sliding back. Thanks
Recording 2025-01-27 140119 f