Filament fields page cutoff (UI Customizer plugin) #142

keving98g · 2021-03-26T01:50:36Z

I am unable to access some of the fields on the bottom of the screen. This is the only plugin with this behavior and is not effected by an update, different (new and old) filaments. It could be specific to my Octoprint setup but I believe I have eliminated other variables.

OctoPrint: 1.5.3
SpoolManager Plugin: 1.3.3

bertenvdb · 2021-04-08T10:08:17Z

Same here

thirschbuechler · 2021-04-13T16:07:11Z

which browser are you using? maybe some adblocker cuts it off, I'm on the same versions and everything seems fine (see reply on #123) - try incognito mode (browser plugins disabled per default) or other browsers.

I'm on google-chrome 89.0.4389.114 for reference, OctoPi version: 0.18.0, OctoPrint: 1.5.3, SpoolManager Plugin: 1.3.3; both before and after an apt dist-upgrade

thirschbuechler · 2021-04-13T17:24:11Z

#112

bertenvdb · 2021-04-15T16:21:02Z

Chrome: 89.0.4389.114
OctoPi: 0.18.0
OctoPrint: 1.6.0rc1
SpoolManager: 1.3.3

I have uBlock Origin but disabled.
Tried in incognito without uBlock.
Created a new Chrome user and tried without plugins.

I do have Themeify installed. After my current print is done, I'll disable that plugin and try again.

thirschbuechler · 2021-04-15T16:52:21Z

is it maybe caused by zoom level and UI customizer as in #112 ?

OllisGit · 2021-04-18T10:02:46Z

Because I can't reproduce the issue I need more infos:

display resolution
browser zoom-level
operating system (e.g. Windows, MacOS)
Desktop, Tablet or Phone
List of all installed Plugins (compact list can be found in octoprint log during startup)

Rebel154 · 2021-04-19T19:10:32Z

This problem occurs on my PC with both Firefox (latest) and Edge (latest).

Resolution: 1920x1200

Browser Zoom: 110%. If I reduce the zoom level down in steps to 50%, the missing elements start to progressively reveal themselves. If I increase the zoom level to 200% in steps, again, the missing elements progressively reveal themselves.

OS: Windows 10 Pro build 19042.928 on desktop PC

Plug-ins:

| Action Command Notification Support (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/action_command_notification
| Action Command Prompt Support (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/action_command_prompt
| Announcement Plugin (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/announcements
| Anonymous Usage Tracking (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/tracking
| Application Keys Plugin (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/appkeys
| Backup & Restore (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/backup
| Cancel Objects (0.4.4) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_cancelobject
| Core Wizard (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/corewizard
| Dashboard (1.18.1) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_dashboard
| Discovery (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/discovery
| DisplayLayerProgress Plugin (1.26.0) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_DisplayLayerProgress
| Error Tracking (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/errortracking
| File Check (2021.2.23) (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_file_check
| Firmware Check (2021.2.4) (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_firmware_check
| GCode Viewer (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/gcodeviewer
| Logging (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/logging
| OctoPod Plugin (0.3.0) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_octopod
| Pi Support Plugin (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/pi_support
| Plugin Manager (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/pluginmanager
| PrintTimeGenius Plugin (2.2.7) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_PrintTimeGenius
| PrusaSlicer Thumbnails (0.1.4) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_prusaslicerthumbnails
| Software Update (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/softwareupdate
| SpoolManager Plugin (1.3.4) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_SpoolManager
| UI Customizer (0.1.5.6) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_uicustomizer
| Virtual Printer (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/virtual_printer
| WebcamTab (0.2.0) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_webcamtab

On my iPad (2020 iPad Air 4), the Spools page loads OK in both Firefox and Safari.

Hope this helps.

melrhombus · 2021-04-20T20:35:07Z

I have the exact same issue on Brave
Disable UI Customizer and issue goes away

LazeMSS · 2021-04-23T11:42:54Z

@OllisGit its caused by this:

OctoPrint-SpoolManager/octoprint_SpoolManager/templates/SpoolManager_tab_dialogs.jinja2

Line 167 in 0e86e1b

    
           <input type="hidden" data-bind="value: spoolDialog.spoolItemForEditing.version" />

That hidden input breaks the before stuff of the way the responsive bootstrap works. If you move that to right after the form (

OctoPrint-SpoolManager/octoprint_SpoolManager/templates/SpoolManager_tab_dialogs.jinja2

Line 164 in 0e86e1b

) it will work and also the code would be more clean.

I would also suggest you change the

OctoPrint-SpoolManager/octoprint_SpoolManager/templates/SpoolManager_tab_dialogs.jinja2

Line 165 in 0e86e1b

to a row-fluid to better support mobile/tablets.

Ohh and maybe expand the editor:

OctoPrint-SpoolManager/octoprint_SpoolManager/templates/SpoolManager_tab_dialogs.jinja2

Line 418 in 0e86e1b

to span12

@codingcatgirl

- PR #161, #117, #133, #134, #153 multi tool support. Big thanks goes to @codingcatgirl - PR #61, #59 temperature offset. Thanks a lot @WyattNielsen - E/B #118 use newodometer.py - E add "implementation-api" - B #150, #116 CSV import fixed ..other tickets - #102, #132, #135, #140, #142

OllisGit · 2021-05-24T16:50:53Z

Hi,
in the latest release V1.4.0 I did some UI-Improvements. @LazeMSS thanks a lot for your suggestions!

Please test and give me a feedback.

Thx, in advance
Olli

Rebel154 · 2021-05-24T19:21:49Z

@OllisGit

The missing fields problem is back with 1.4.0. All other plugins are the latest versions of my list from above. Zooming out to 67% or in to 200% gradually reveals the missing fields in a single column.

OllisGit · 2021-05-24T22:36:37Z

hmm..then the improvement from @LazeMSS didn't help.
@Rebel154 please make a screenshot...and try to disable other plugins maybe there is a (still) a collision between some plugins.

Rebel154 · 2021-05-25T10:34:41Z

@OllisGit

Just tried with 1.4.1 (and now 1.4.2) as well and the issue persists. I have restarted the Raspberry Pi and Octoprint.

Updated Plugin List

| Action Command Notification Support (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/action_command_notification
| Action Command Prompt Support (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/action_command_prompt
| Announcement Plugin (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/announcements
| Anonymous Usage Tracking (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/tracking
| Application Keys Plugin (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/appkeys
| Backup & Restore (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/backup
| Cancel Objects (0.4.4) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_cancelobject
| Core Wizard (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/corewizard
| Dashboard (1.18.2) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_dashboard
| Discovery (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/discovery
| DisplayLayerProgress Plugin (1.26.0) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_DisplayLayerProgress
| Error Tracking (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/errortracking
| Filament Manager (1.7.2) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_filamentmanager
| File Check (2021.2.23) (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_file_check
| Firmware Check (2021.2.4) (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_firmware_check
| GCode Viewer (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/gcodeviewer
| GPIO Control (1.0.8) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_gpiocontrol
| Logging (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/logging
| OctoPod Plugin (0.3.0) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_octopod
| Pi Support Plugin (2021.3.26.post2) (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_pi_support
| Plugin Manager (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/pluginmanager
| PrintTimeGenius Plugin (2.2.8) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_PrintTimeGenius
| Prusa MMU2 Select Filament (1.0.3) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_mmu2filamentselect
| Slicer Thumbnails (1.0.0) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_prusaslicerthumbnails
| Software Update (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/softwareupdate
| !SpoolManager Plugin (1.4.0rc1) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_SpoolManager
| UI Customizer (0.1.5.8) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_uicustomizer
| Virtual Printer (bundled) = /home/pi/oprint/lib/python3.7/site-packages/octoprint/plugins/virtual_printer
| WebcamTab (0.2.11) = /home/pi/oprint/lib/python3.7/site-packages/octoprint_webcamtab

My screenshots are the same as the first post above. I disabled all plug-ins except UI-Customiser and the issue persists. Disabling Ui-Customiser clears the issue.

HTH.

diedder · 2021-05-25T14:42:07Z

Hi,

in 1.4.2 the fields are underneath the spool window

LazeMSS · 2021-05-25T18:16:11Z

Agreed - something is more broken now

LazeMSS · 2021-05-25T18:20:42Z

Not sure why but my right colum has span12 and not span6

LazeMSS · 2021-05-25T18:23:51Z

it must be something in my code I think...

Update: Yes its the old workaround I made that now gives conflicts.

LazeMSS · 2021-05-25T18:38:20Z

@OllisGit I have just released a new version - was a bit rushed but didn't want your plugin to get bad rep due to my "hacks"

OllisGit · 2021-05-25T20:57:47Z

Hi @LazeMSS,

I installed the latest version 0.1.5.9 (wow, 4 digits) and can confirm that the spool-item dialog is "almost" fixed (the active checkbox is not in the upper right corner).

But I also tested the PrintJob-Dialog (V1.14.0) and this dialog is still broken. Everything is in one column.
hmmm...to be honest I have no clue whats going on, I am not a UX-Guy.

achampion · 2021-05-25T21:15:27Z

Changing the right column from span12 to span6 fixed things on my system.
Note: also changed the filament title name to span7 (from span9)

LazeMSS · 2021-05-26T04:16:28Z

Hi @LazeMSS,

I installed the latest version 0.1.5.9 (wow, 4 digits) and can confirm that the spool-item dialog is "almost" fixed (the active checkbox is not in the upper right corner).

But I also tested the PrintJob-Dialog (V1.14.0) and this dialog is still broken. Everything is in one column.
hmmm...to be honest I have no clue whats going on, I am not a UX-Guy.

I hopefully have a couple of hours this weekend. I will try and do a rework of the UI and send you a pr

OllisGit · 2021-05-26T13:20:27Z

Hi @LazeMSS,

I played around with the chrome dev-tools and saw that your plugin overwrite the standard bootstrap 'span' classes (puhh, is that the right strategy).

For the PJH-Dialog I disabled the span6 class and now I can see the two columns again.

As I mentioned I am not a UI-Export, but I think this is not a good way to do. Of course you did an AMAZING job to do a total redesign of the default UI, but are there some other ways to do?

Maybe this is also a question to the OP-Community how to separate Plugin UI-Stuff, is "Shadow Dow" the way to go
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

I appreciate it very much that you try to find free time to analyse the issue a little bit deeper and (probably) create a PR!

BR
Olli

LazeMSS · 2021-05-26T14:10:55Z

My plugin basically just include the standard bootstrap responsive files. It's a standard way of doing it in bootstrap.

Your dialog is basically to crowded for at bootstrap modal dialog.

I will do my best to make a clean solution for you ASAP.

LazeMSS · 2021-05-26T14:13:56Z

https://getbootstrap.com/2.3.2/scaffolding.html#responsive

diedder · 2021-05-26T15:30:35Z

@OllisGit I have just released a new version - was a bit rushed but didn't want your plugin to get bad rep due to my "hacks"

fixed at my Safari browser on MacBookPro

LazeMSS · 2021-05-26T15:31:38Z

@OllisGit don't know what PrintJob-Dialog is?

LazeMSS · 2021-05-26T15:34:07Z

@OllisGit I have just released a new version - was a bit rushed but didn't want your plugin to get bad rep due to my "hacks"

fixed at my Safari browser on MacBookPro

It also works fine for me :(

OllisGit · 2021-05-27T22:02:13Z

fyi: PJH == PrintJobHistory-Plugin --> https://github.com/OllisGit/OctoPrint-PrintJobHistory

@TiziG

- PR #204, #201 redesign of the Spool-Selection in the sidebar. Huge thanks to @TiziG @MarloSM - E #125 New field "Serialnumber" - E Spool selection from Edit-Dialog - E #141 New Filter: Material, Vendor and Color - E #44 Sidebar filament usage in grams instead of volume - B #199, #198, #163, #156 some QR-Code optimisations - B #197, #196, #188, #181, #178, #177, #172, #162, #142, Some UI optimisations - B #194 CSV import, behind reverse proxy - B #175 Confirm dialog not shown

OllisGit · 2021-10-24T14:49:45Z

Hi all ,
in the latest release 1.5.0 I did some ui improvements, that "should" solve the mentioned issues.

Please try and give me a feedback.
Olli

OllisGit · 2022-01-07T17:37:26Z

No feedback, please raise new issue if needed

thirschbuechler mentioned this issue Apr 13, 2021

Cannot add weight #131

Closed

This was referenced Apr 15, 2021

Spool page is not 2 columns and missing note's text box #112

Closed

Spool edition form problem [Bug] #124

Closed

OllisGit added the status: analysing label Apr 18, 2021

OllisGit added the status: waitingForFeedback Wating for Customers feedback label Apr 18, 2021

LazeMSS mentioned this issue Apr 23, 2021

0.1.5.6 doesn't support SpoolManger Window LazeMSS/OctoPrint-UICustomizer#143

Closed

OllisGit added status: inNextRelease Will be implemented/fixed in next release and removed status: analysing status: waitingForFeedback Wating for Customers feedback labels May 24, 2021

OllisGit added status: waitingForTestFeedback type: bug Something isn't working and removed status: inNextRelease Will be implemented/fixed in next release labels May 24, 2021

OllisGit changed the title ~~Filament fields page cutoff~~ Filament fields page cutoff (UI Customizer plugin) May 25, 2021

OllisGit mentioned this issue May 25, 2021

Spools UI degraded after 1.4 update #165

Closed

LazeMSS mentioned this issue May 25, 2021

Develop LazeMSS/OctoPrint-UICustomizer#156

Merged

OllisGit mentioned this issue May 26, 2021

Using UI Customizer - Spool Manager panel overlaps the one below #171

Closed

LazeMSS mentioned this issue May 27, 2021

Spool Manager overlaps panel below LazeMSS/OctoPrint-UICustomizer#157

Closed

OllisGit added status: inNextRelease Will be implemented/fixed in next release and removed status: waitingForTestFeedback labels Oct 24, 2021

OllisGit added status: waitingForTestFeedback and removed status: inNextRelease Will be implemented/fixed in next release labels Oct 24, 2021

This was referenced Oct 24, 2021

Cant add any Spools, form to enter values is blocked by something #162

Closed

Odd display issue, grey box over everything #172

Closed

Spool manager doen't show the spools features #177

Closed

unable to insert new spools mask is not showing up #181

Closed

OllisGit closed this as completed Jan 7, 2022

OllisGit removed the status: waitingForTestFeedback label Jan 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Filament fields page cutoff (UI Customizer plugin) #142

Filament fields page cutoff (UI Customizer plugin) #142

keving98g commented Mar 26, 2021

bertenvdb commented Apr 8, 2021

thirschbuechler commented Apr 13, 2021 •

edited

Loading

thirschbuechler commented Apr 13, 2021

bertenvdb commented Apr 15, 2021 •

edited

Loading

thirschbuechler commented Apr 15, 2021

OllisGit commented Apr 18, 2021 •

edited

Loading

Rebel154 commented Apr 19, 2021

melrhombus commented Apr 20, 2021

LazeMSS commented Apr 23, 2021 •

edited

Loading

OllisGit commented May 24, 2021

Rebel154 commented May 24, 2021

OllisGit commented May 24, 2021

Rebel154 commented May 25, 2021 •

edited

Loading

diedder commented May 25, 2021

LazeMSS commented May 25, 2021

LazeMSS commented May 25, 2021

LazeMSS commented May 25, 2021 •

edited

Loading

LazeMSS commented May 25, 2021

OllisGit commented May 25, 2021

achampion commented May 25, 2021 •

edited

Loading

LazeMSS commented May 26, 2021

OllisGit commented May 26, 2021

LazeMSS commented May 26, 2021

LazeMSS commented May 26, 2021

diedder commented May 26, 2021 •

edited

Loading

LazeMSS commented May 26, 2021

LazeMSS commented May 26, 2021

OllisGit commented May 27, 2021

OllisGit commented Oct 24, 2021

OllisGit commented Jan 7, 2022

Filament fields page cutoff (UI Customizer plugin) #142

Filament fields page cutoff (UI Customizer plugin) #142

Comments

keving98g commented Mar 26, 2021

bertenvdb commented Apr 8, 2021

thirschbuechler commented Apr 13, 2021 • edited Loading

thirschbuechler commented Apr 13, 2021

bertenvdb commented Apr 15, 2021 • edited Loading

thirschbuechler commented Apr 15, 2021

OllisGit commented Apr 18, 2021 • edited Loading

Rebel154 commented Apr 19, 2021

melrhombus commented Apr 20, 2021

LazeMSS commented Apr 23, 2021 • edited Loading

OllisGit commented May 24, 2021

Rebel154 commented May 24, 2021

OllisGit commented May 24, 2021

Rebel154 commented May 25, 2021 • edited Loading

diedder commented May 25, 2021

LazeMSS commented May 25, 2021

LazeMSS commented May 25, 2021

LazeMSS commented May 25, 2021 • edited Loading

LazeMSS commented May 25, 2021

OllisGit commented May 25, 2021

achampion commented May 25, 2021 • edited Loading

LazeMSS commented May 26, 2021

OllisGit commented May 26, 2021

LazeMSS commented May 26, 2021

LazeMSS commented May 26, 2021

diedder commented May 26, 2021 • edited Loading

LazeMSS commented May 26, 2021

LazeMSS commented May 26, 2021

OllisGit commented May 27, 2021

OllisGit commented Oct 24, 2021

OllisGit commented Jan 7, 2022

thirschbuechler commented Apr 13, 2021 •

edited

Loading

bertenvdb commented Apr 15, 2021 •

edited

Loading

OllisGit commented Apr 18, 2021 •

edited

Loading

LazeMSS commented Apr 23, 2021 •

edited

Loading

Rebel154 commented May 25, 2021 •

edited

Loading

LazeMSS commented May 25, 2021 •

edited

Loading

achampion commented May 25, 2021 •

edited

Loading

diedder commented May 26, 2021 •

edited

Loading