LazeMSS / OctoPrint-UICustomizer

UI Customizer for octoprint
165 stars 18 forks source link

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

Open Dr-Ari-Gami opened 3 years ago

Dr-Ari-Gami commented 3 years ago

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.

LazeMSS commented 3 years ago

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

I'm still working on a solution

electronicm commented 3 years ago

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?

LazeMSS commented 3 years ago

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.

borkedporcupine commented 3 years ago

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.

LazeMSS commented 3 years ago

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

NilsRo commented 1 year ago

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