OctoPrint-UICustomizer icon indicating copy to clipboard operation
OctoPrint-UICustomizer copied to clipboard

[BUG] Navbar Icons don't display correctly on mobile if they are too wide.

Open Dr-Ari-Gami opened this issue 3 years ago • 6 comments

With just a few plugins installed that add navbar indicators, on mobile they run off the screen. It would be nice if if they horizontally scrolled.

Example Screenshot of Issue

I'd submit a pr, but It's been a few years since I've done web development.

Dr-Ari-Gami avatar Sep 13 '21 00:09 Dr-Ari-Gami

I had it working in a release but it caused problems with plugins overflowing with popovers etc.

I'm still working on a solution

LazeMSS avatar Sep 13 '21 04:09 LazeMSS

Would it make sense to determine the height of the div via JS and move all content downwards accordingly?

What I could well imagine would be the same mechanism as is used for the tabs in the main section. So that all icons that exceed the display width are in a dropdown.

However, I see the display of the DisplayLayerProgress plugin as a fundamental problem. Due to the display of long text, this is not suitable for small display areas. Should the developer be involved in solving the problem?

electronicm avatar Sep 13 '21 04:09 electronicm

Yes but it would require a resize event handler - I did 90% of the work in CSS and a bit of js - but hiding the overflow caused the popovers etc. for some plugins to be hidden.

I think I will do a complete rewrite where its handle ind a better way to have the icons in a pull down fasion - still testing a lot of ideas.

LazeMSS avatar Sep 13 '21 06:09 LazeMSS

Capture

I have a similar issue when using a smaller screen. I'm assuming it's related to the same problem/solution. Buttons render on top of others making them inaccessible. If not related I can open a separate issue.

borkedporcupine avatar Oct 25 '21 21:10 borkedporcupine

It is related - this is also "a problem" without UI Customizer

LazeMSS avatar Oct 25 '21 21:10 LazeMSS

Perhaps you can do the same and put all LI elements into a dropdown. Would not looks that nice but the UI will stay accessible. IMG_0161

NilsRo avatar Jan 04 '23 12:01 NilsRo