LazeMSS / OctoPrint-UICustomizer

UI Customizer for octoprint
164 stars 18 forks source link

Main tabs not going full width #11

Closed LordCorellon closed 3 years ago

LordCorellon commented 3 years ago

I recently installed the UI customizer and sadly it is unusable all the other main tabs do not stretch full width.

The most noticeable is the terminal tab which will only take up a 1/3rd of the middle panel. Panel is set up for width 6 but the terminal output is only as wide as the left panel (currently set for width two)

LazeMSS commented 3 years ago

Could you provide more information, browser, os and maybe a screenshot.

And a plugin list etc.

LordCorellon commented 3 years ago

Terminal Small Windows 10 - Ver 2004 - Build 19401.572 Chrome Version 87.0.4280.88 (Official Build) (64-bit)

LordCorellon commented 3 years ago

Plugin List: Active Filters Extended (0.1.0) Arc-Welder (1.0.0+u.bb71e8f) Bed Visualizer (1.0.0) BLTouch Plugin (0.3.4) Change Filament Plugin (0.3.1) Detailed Progress (0.2.6) Enclosure Plugin (4.13.1) ipOnConnect (0.2.4) Marlin EEPROM Editor (2.0.0) Multi Line Terminal (0.1.5) PrintTimeGenius Plugin (2.2.6) ProgressBasedOntime Plugin (0.1.6) Simple Emergency Stop (1.0.4) UI Customizer (0.1.0.0)

I did have the widescreen plugin and consolidated temp and control installed prior to UI Customizer but had uninstalled them

Cause: Consolidated temp and control plugin interferes with all the other tabs width, disabling or uninstalling the plugin is not enough it has to be uninstalled and data removed. I'm not sure if this is an issue with UI customizer or Consolidated T&C but if compatibility can be obtain that would be appreciated as I do find it useful having them both on the same screen.

LazeMSS commented 3 years ago

Thats strange im running an almost identical setup - windows 10 and chrome 87. I cant recreate the problems your having - this is how it looks on my pc: image

Are you sure you have the rows/colums setup to give a total of 12? Also maybe try disabling: "Multi Line Terminal" plugin.

Widescreen plugin should NOT be installed together with UI Customizer. Maybe I should add a warning about it.

Im looking into the consolidated temp and control plugins - they do manipulate alot with the layout and more similar to my plugin.

LordCorellon commented 3 years ago

The total is 12 for sure, 3+6+3.

Multi-line terminal works fine, I've isolated the issue to being completely within the consolidated temp and control plug, when I completely uninstall it (and clear data) then the issue goes away, if it's just disabled or uninstalled (without clearing data) then every tab gets squashed.

If there is anyway to implement compatibility it would be appreciated, or if that is something better directed to that plugins author please let me know.

Thanks for your contribution and investigation.

LazeMSS commented 3 years ago

Yes im looking into it now - there is a problem - im fixing it.

LazeMSS commented 3 years ago

Try pressing F12 (developer console) in Chrome and paste the following into the console:

$('div.page-container').css({'min-width':''});
$('div.footer').css({'padding-left':'','padding-right':''});
$('div.UICMainCont > div:first').css({'margin-left':'','padding-right':''});
$('div.UICMainCont').removeClass('row-fluid');

This seems to fix it in my browser, I would really like to know if it works on yours as well so I can add a fix

LordCorellon commented 3 years ago

When I run it, it seems to do the opposite, makes everything in the middle frame squish about 10% more to the left. After Before

LazeMSS commented 3 years ago

Can you post a screenshot of your settings for consolidated ?

It might be easier to implement it's functionality into my plugin instead of working around these problems 🙈

LordCorellon commented 3 years ago

Consolidated

Tried with and without nav bar resize enabled

Edit: When layout is set to vertical everything works properly, even without the dev tools changes

LazeMSS commented 3 years ago

Ahh you don't have themify. I can see the control plugin have different behaviour for this. I will spend more time investigating tomorrow.

Is the only purpose of the control plugin to join the temperature and controls onto one tab?

LordCorellon commented 3 years ago

Pretty much what I use it for, I always hated having to switch tabs when changing filament or adjusting offsets. In fact I would love if the terminal could be combined on the same screen as well and hoped a plugin might do so later.

I'm hoping one day Octoprint moves to a modular sort of layout (If your familiar with OpnSense I like the dashboard setup) where you can specify columns width (like your plugin) but drag and drop "Widgets" to each area to arrange in the order you'd like

LazeMSS commented 3 years ago

Should be now fixed - please update and test :)

LazeMSS commented 3 years ago

@LordCorellon can you confirm if its working?

Guilouz commented 3 years ago

There is issue with full screen. Look search bar

With UICustomizer :

Capture d’écran 2020-12-07 à 20 14 59

With Widescreen plugin all is ok :

Capture d’écran 2020-12-07 à 20 15 12
LazeMSS commented 3 years ago

There is issue with full screen. Look search bar

Yes because widescreen plugin forces that - I would like to avoid that to keep the UI compliant to normal way of doing things. But this bug report is about the main tabs not showing full width when using "consolidated temp" plugin.

Edit: Ahh noticed the search bar now - sorry but that when you have disabled "responsive/mobile" mode - I would not recommend turning that off - but I have a fix ready

LordCorellon commented 3 years ago

@LazeMSS I can confirm the latest release has fixed the compatibility issue with Consolidated Temp and Control. Works both in vertical and horizontal arrangements now.

Even better with the wider main tab the control fits perfectly in horizontal mode without having to scroll down.

Thank you very much

LazeMSS commented 3 years ago

@LazeMSS I can confirm the latest release has fixed the compatibility issue with Consolidated Temp and Control. Works both in vertical and horizontal arrangements now.

Even better with the wider main tab the control fits perfectly in horizontal mode without having to scroll down.

Thank you very much

Thanks - I have made a couple of improvements in the next aswell.

Guilouz commented 3 years ago

There is issue with full screen. Look search bar

Yes because widescreen plugin forces that - I would like to avoid that to keep the UI compliant to normal way of doing things. But this bug report is about the main tabs not showing full width when using "consolidated temp" plugin.

Edit: Ahh noticed the search bar now - sorry but that when you have disabled "responsive/mobile" mode - I would not recommend turning that off - but I have a fix ready

Yes but I prefer the old settings panel on the left, that's why I have disable it. Maybe an option to choose it or not ?

LazeMSS commented 3 years ago

There is issue with full screen. Look search bar

Yes because widescreen plugin forces that - I would like to avoid that to keep the UI compliant to normal way of doing things. But this bug report is about the main tabs not showing full width when using "consolidated temp" plugin. Edit: Ahh noticed the search bar now - sorry but that when you have disabled "responsive/mobile" mode - I would not recommend turning that off - but I have a fix ready

Yes but I prefer the old settings panel on the left, that's why I have disable it. Maybe an option to choose it or not ?

Only way to have a settings menu that works on small screens :(