All tabs now below the left-hand sidebar....

[Jakdaw]

This is awesome! However... for me in both Chrome/Firefox I find that the tabs all get pushed below the Connection/State/Files elements at the left of the screen, rather than going alongside them.

Any ideas how to stop that?

[jaanbrotherns]

Love this plugin, but same thing happening for me where the tabs are below the printer connectivity tab.

[DaSTIG]

Same here. Maybe it can be side effect of other plugins? Do we know if others such as "re order" can make cause it?

I hope one day Octoprint would adopt this natively, as a lot of space is wasted... But until then, i would try use this.

[Lyngtoft]

I have the same issue. using the new Edge browser. Tried chainging "overall size" but with no luck.

[jneilliii]

So can you guys provide a screenshot for me and list of 3rd party plugins you are using? I am not seeing that here myself running in Chrome.

[Lyngtoft]

Plugins enabled. (Themify is currently disabled)

I'm just printing so cant restart yet, will get back with a picture showing the issue after.

[jneilliii]

Sure, no rush. I know it works with Themeify...with some tweaks to advanced settings for the panels.

The ones on that list I do not use are.

• octolapse
• enclosure
• exclude region
• navbar temp
• octoklipper
• terminal commands extended

[DaSTIG]

I just started a print, I will provide the image in a couple hrs... here are my plugins. But no rush man, its all good, im sure this stuff will be figured out. Just wish i could help more.

[Miraculix200]

You can probably fix it by making the width of the plugin slightly larger than the available width in your browser. At least that's what fixes it for me

[jneilliii]

Thanks @Miraculix200 that's potentially a good idea. In the additional fact gathering, did you all combine all your available tabs too? It looks like @DaSTIG also has exclude region; of his other plugins listed I don't have these.

• detailed progress
• e-stop settings
• eeprom marlin editor
• fan speed control
• PSU control
• preheat button
• print history
• resource monitor
• terminal commands

[Lyngtoft]

It looks like this: (currenly no tabs added)

If i set overall width to 2700 it works, but i get a horisontal scrollbar in the bottom.

[Miraculix200]

No, I only let it display 2 tabs (terminal and temperature) side by side

[Miraculix200]

Plugin width 1640 (I got a browser sidebar open)

Plugin width 1600

Installed plugins:

Arc-Welder
Consolidated Tabs
Detailed Progress
EEPROM Marlin Editor Plugin
Enclosure Plugin
Fan Speed Control
GCODE System Commands
Heater Timeout
M73 Progress
Navbar Temperature Plugin
Preheat Button
PrintTimeGenius Plugin
Printer Dialogs
Printer Notifications
Simple Emergency Stop
System Command Editor
TP-Link Smartplug
Terminal Commands Extended

[303Michael]

I'm having a similar issue but the page just isn't going into full screen. Hopefully I'm not missing something outside the plugin settings that's preventing it.

My other 3rd party plugins are Firmware Updater (1.7.0) and Simple Filament Change Buttons (1.0)

[jneilliii]

@303Michael, did you set the overall width at all? That looks like maybe only the navbar option is enabled.

For the rest, I'll have to do some testing on my end to see if I can reproduce. I find that setting my overall width to a size a bit smaller than my resolution works best. For example my resolution is 1920x1080 with 100% text scaling in windows and I set my overall width to 1900.

[303Michael]

I did try setting the overall width but the left sidebar was unaffected by it. I did just now install your widescreen plugin and that pushed the left sidebar over but I need to play around with this plugin combined with it still.

[war4peace]

I am encountering the same issue. The Consolidated Tabs plugin is below the left side navbar, I have tried setting various widths to the window to no avail. If I leave the Overall Width empty, the consolidated tabs window snaps where it should be but is very narrow and can't use it. All other sizes I have tried place it below the navbar. Enabling or disabling the "Resize Navbar" option does nothing visible, the issue remains the same. Plugins:

Bed Visualiser Cancel Objects Dashboard DisplayLayerProgress Exclude Region Filament Manager Firmware Updater Octolapse Opitemp PrintJobHistory Printer Dialogs Printer Notifications PrusaSlicer Thumbnails Themeify Ultimaker Format Package Virtual printer (disabled)

Combined Tabs: Control Temperature Terminal Cancel Objects

Uncombined Tabs: Timelapse (disabled) Bed Visualizer Dashboard GCode Viewer Octolapse Print Job History

[jneilliii]

Thanks @war4peace very helpful. I'm starting to see a couple of possible plugin conflicts. Seems several of you have Exclude Region installed, but not all of you so it may be unrelated. The one thing I forgot to ask, please let me know what browsers you are using and if there are any errors reported in the developer console (F12 in most browsers) when you force a refresh (shift+F5 or ctrl+F5 depending on your browser) of the web page. I'm aware of the width error with flot already but that doesn't impact the tabs, looking for any additional errors.

[war4peace]

Here's what I have noticed. If I set a larger Overall Width, larger than the current window size, the Consolidated Tabs window snaps next to the navbar. I don't know how to measure precisely, but it looks like the Overall Width should be set to a minimum of browser window X size plus navbar X size, and then the Consolidated Tabs snaps in the correct position (navbar on its left). If the Overall Width is smaller than Browser Window width plus navbar width, the Consolidated Tabs moves below the navbar.

Ideally, the Overall Width should be at least equal to browser window width (if it includes the navbar) or browser window width minus navbar (if this setting does not include the navbar width).

Of course it's an assumption, but empiric testing seems to back this up. Maybe a good place to start troubleshooting.

My browser is Chrome Version 84.0.4147.105 (Official Build) (64-bit). Right now my OctoPrint decided to lose wireless connectivity (again!) during printing, so I have to wait 10h for the print to finish and restart the Pi. It's a separate issue which has been plaguing me since I bought the Pi. Loses wireless connectivity and doesn't reconnect unless I pull the power plug, but printing works fine.

[jneilliii]

Thanks @war4peace I'll be looking into this over the weekend. I think I probably just need to move this block to initialization rather than where it's being applied now. Might also have to apply the changes to a different container element.

[jneilliii]

Could I get a couple of volunteers to open their developer console in their browser and run the following commends please and let me know what's?

$(window).innerWidth() 
$('#sidebar').outerWidth();

and does anything change for you if you run this command? Replace 1900px with an appropriate size for your display resolution.

$('div#page-container-main, div.octoprint-container').css({'min-width':'1900px', 'width':'1900px'});

[ryannovotny]

Running into an issue where the left sidebar is still positioned near the center and all consolidated tabs appear below it.

Went and ran the two commands listed by @jneilliii and got 1858 and 300, respectively.

After running the third command and changing the values to my monitors width (2560), the tiles rearranged themselves and appears as it should.

[jneilliii]

Thanks @ryannovotny that does make me think that I just need to move the resizing around in the plugin. I think if the resize happens earlier during initialization it will probably help. Not sure why I'm still unable to reproduce this though.

[kurtd5105]

This repros for me, the only additional tab I have is the bed visualizer. 1080p monitor, Chrome browser. Setting the overall width to 1900px works and fixes things for me. The biggest issue I have with this is that the overall width is for what exactly? The new combined tab area? The entire page (including the connection and file management screen)?

Perhaps it might be useful adding some sort of readout of the current window width, where the user can then enter this value in or set it as the default width. From there, you could add a slider for % of that space to use (for the entire page). If the user resizes beyond that default width, then the contents will move all the way until the left until they can't, and the content on the right will be cut off (with a scrollbar at the bottom).

[Miraculix200]

$(window).innerWidth() 1638

$('#sidebar').outerWidth(); 300

$('div#page-container-main, div.octoprint-container').css({'min-width':'1900px', 'width':'1900px'}); Makes the container move up, but now the icons in the title bar are outside of the visible area of the display

[jneilliii]

The biggest issue I have with this is that the overall width is for what exactly?

Fair point, that could be named/documented better. It's for the overall page width, including the sidebar on the left. The width of the tab side of the page is calculated from that value and subtracts the sidebar width and 40 additional pixels for margins, etc.

tabs_width = ($(window).innerWidth() - $('#sidebar').outerWidth() - 40).toString() + 'px';

@Miraculix200 you should use the value ~1600 probably, maybe a little smaller like 1590, for that reported window innerWidth. So probably will add the suggestion from @kurtd5105 with a hint about what that value should be.

[jneilliii]

This makes me wonder though. Are you guys going to the site in a maximized browser window or not? That could throw off the math as it's only being set during initial page load.

[war4peace]

I don't know if this is something common or just me being a weirdo, but my monitor is 3440x1440 and I don't maximize the browser window, so in my case the Overall Width (of the browser window) is variable. I wonder if it's possible to design the plugin in such a way that it simply creates horizontal scrollbars if the overall width is greater than the browser window width, and get rid of that setting completely.

[kurtd5105]

Are you guys going to the site in a maximized browser window or not?

I am at least.

will add the suggestion from @kurtd5105 with a hint about what that value should be.

I think that's a good idea, just assuming users are using a 1080p panel and will see the 1900px in the screenshots will lead to confusion for those who want it taking up the entire width and maybe didn't catch that or have a different sized window. I missed that on the octoprint page since it was just in the screenshot, you might want to point out on the octoprint page that users have to do some work to get it to fill the width (otherwise it will behave like stock).

[jneilliii]

The problem is that I'm having to override some of the default sizing that's applied by the core OctoPrint, which is why it stays narrow if that setting is blank. IF there are no positions/sizes set from resizing the panels those panels get inserted in as 33% width IIRC. I'll see if there's a way in which I can remove the width from octoprint rather than overriding it and if that works for me the way it does now it might resolve this issue for you too.

If you guys haven't figured out yet, I'm not great at UI design/css but I'm trying my best.

[war4peace]

There is no rush, mate, we all appreciate your work, and now that there is a workaround, I really don't mind the horizontal scrollbars.

[kurtd5105]

There is no rush, mate, we all appreciate your work

This. Just trying to help provide suggestions/second pass on design, by no means is this urgent.

The problem is that I'm having to override some of the default sizing that's applied by the core OctoPrint, which is why it stays narrow if that setting is blank.

I think this is a good thing. Let users choose if they want to override that.

If you guys haven't figured out yet, I'm not great at UI design/css but I'm trying my best.

You're doing great and this plugin is super helpful. I no longer need to constantly switch between control and temperature.

[Miraculix200]

@Miraculix200 you should use the value ~1600 probably, maybe a little smaller like 1590, for that reported window innerWidth. So probably will add the suggestion from @kurtd5105 with a hint about what that value should be.

When I make it 1600 the tab container jumps down again. Also tried lower numbers. Basically it only stays up when the browser starts to display the horizontal scrollbar

[jneilliii]

Ok, I have successfully reproduced the issue by setting my overall width smaller than I had it. By doing that it's forcing the tab section like you guys. Now that I have a place to start, I think I'll be able to come up with a solution a lot quicker.

[jneilliii]

I've switched some things around and added a couple of css tricks to hopefully fix this issue. If anyone wants to give it a try and let me know you can install using the URL below in plugin manager > get more > ...from URL, and click Install. The tab area will now wrap the panels if they are larger than the area and switched from a set width option to a calculated width option in settings.

https://github.com/jneilliii/OctoPrint-ConsolidatedTabs/archive/0.0.8.zip

[ryannovotny]

Unistalled previous version and installed the one in the above URL. Result is that the tabs are now positioned to the right of the sidebar and wrap, however they are still positioned off screen and the sidebar does not move to mitigate this. It also looks like the tiles lay outside the border for the tabbed area as well.

Edit: I forgot to enable the new setting Use Full Width of Browser. Selecting this does fix my issues! There does seem to be some clipping with the text in the bottom right, however this looks to take care of it.

[jneilliii]

That's good news. Yeah, the sizes coming in from previous settings threw those panels to the side like that. Thanks for pointing out the footer issue, I didn't catch that.

[einsteinx2]

I'm also on macOS Catalina using Chrome and was experiencing the same issue. I can confirm that using the 0.0.8 version link posted and setting to use full width fixes the issue for me as well. Great work, this plugin is awesome other than a few layout issues when the window is resized smaller which isn't a big deal. Much nicer to see everything in one place since I have a widescreen monitor (as does basically everyone)!

[einsteinx2]

One thing that would be great to fix though is the ability to move panels that are behind other panels. While moving things around, it's very easy to end up covering panels with other panels and then the move icon is impossible to click without moving the other panels out of the way which can be difficult to do. Also it seems to be very easy to make a small adjustment and all of a sudden have the panels move a lot or resize a lot. Not sure what CSS would be required to allow clicking the move icon behind other windows, but if it's possible to make some CSS change to allow that it would make rearranging 100 times easier.

[einsteinx2]

Actually found a new issue, using the 0.0.8 version it seems like many times changing width or moving one of the other panels modifies a different panel for some reason. Also now one of the panels has completely disappeared... Anyway no worries, I know this plugin is very new and issues are to be expected. With some of these arrangement issues ironed out I can see this definitely being a must have for all octoprint installs!

Edit: Sorry for dumping everything into this issue, should I make new issues for each thing?

[jneilliii]

There is an issue already for the disappearing tabs. The resizing issue I noticed as well and not sure why it does that to be honest, but I did make the bottom of the overall tab container resizable as well, to hopefully help find those panels that have moved out of view. I bet it has to do with relative positioning of the panels to the next panel in the order. What I've found that works the best is to order them in settings roughly how you want them ordered in the consolidated tab, then resize/position them from the last panel and work your way forward to the first panel. It's real finicky, hence the 0.0.X releases.

[nigeljohnson73]

0.0.8 seems to fix the width issue, but I cannot drag a panel underneath another ne, Temp top left, console bottom left, control right hand side?

[jneilliii]

If you order the tabs in the settings the way you want them in the consolidated tab they should wrap, left to right, top to bottom. You can resize the tab container element further down as well to be able to make more adjustments. When you make tabs wider than what fits into the available space they should wrap as well.

[nigeljohnson73]

Ah, ok, as long as it's not a bug, it does require some thinking though :) I have a wide display and it's nice to be able to use the whole real estate finally 👍 Thanks.

[jneilliii]

What is everyone's thought on removing the draggable capability all together and just make the panels sizable? All the panels would then just flow in the order they are in the plugin's settings, wrapping once they go beyond the tab container.

[war4peace]

I believe that's a very good idea. As long as they can be arranged in the plugin settings, I see no problem with it.

[ryannovotny]

I second this, as long as the tiles are resizeable (for example, the Octoprint Dashboard plugin changes size depending on if a print is going) then simply setting the order in the settings would be just fine.

I would suggest changing the settings order from being listed vertically to horizontally, though, just for some continuity between the settings page and the displayed tabs.

[jneilliii]

I would suggest changing the settings order from being listed vertically to horizontally, though, just for some continuity between the settings page and the displayed tabs.

Very good point, that makes total sense. I did consider making all the interactions for dragging/sizing panel entirely in the settings, but then though against it because you can't really tell the content of the tab while doing it.

I did push an update last night to the same 0.0.8 branch that I think helps a lot. Only the selected panel is able to be resized, and you can also now select panels to bring them to the front, in case there's overlap. If you guys want to test it out, uninstall the version you have now and install with the same URL as before.

https://github.com/jneilliii/OctoPrint-ConsolidatedTabs/archive/0.0.8.zip

Also updated the readme with some tips here on what seems to be the most stable procedure.

Also, as suggested in another issue, I'll be adding a "lock" panels option that disables the sizing and dragging altogether, if we decide on keeping the dragging option in the tab.

[nexusgx]

To add to this, when I installed 0.0.8 initially, I had boxes floating off the screen so I couldn't move them. I had to "Uninstall and Wipe Everything" to get it to act properly. Now it works with the full width option turned on.

As for panel arrangement, I might suggest something like this: http://clippings.github.io/layout-grid/demos/resize.html

[jneilliii]

Thanks for that recommendation of layout grid. it looks pretty interesting. I'll investigate it further, Having locked dimensions like that though does limit some of the flexibility that I was trying to achieve with the jQuery UI draggable/resizble effects, but could also resolve some of the weirdness for sure since it does lock down the layout.

[jneilliii]

Oh, and by the way @nexusgx that's why the clear positions and clear sizes button exist. If you can get into the plugin's settings you can use those and it will reset the layout. In the latest iteration of 0.0.8, if you reset the sizes they will be forced to 100% width, resetting the positions will put them back to inline/wrapping.