"Proceed" buttons won't fit

[Strat00s]

So I finally configured my new OctoPrint build (RPi 3 A+ and its 7'' touchscreen). Just installed TouchUI, just to find out that it won't fit "Proceed" buttons for reboot, shutdown and restart confirmation...
What should I do to get them back?

[BillyBlaze]

Hi @Strat00s,

Sorry for the long delay, I am unable to reproduce your issue. Could you perhaps share you list of installed plugins?

[OutspokenPlanet]

I'm also having this problem, can confirm on my touch screen that boots to TouchUI this isn't an issue, it only occurs on smaller screens accessing via web browser "i.e. chromium" if it's any help here's a list of current plugins on one of my machines
Active Filters (0.0.1)
Active Filters Extended (0.0.2)
Autoscroll (0.0.2)
Bed Visualizer (0.1.7)
Custom Control Editor (0.2.1)
Display Progress (0.1.2)
EEPROM Marlin Editor Plugin (1.2.1)
Enclosure Plugin (4.12)
Extra Distance Buttons (0.1.0)
Fan Speed Control (0.2.1)
Fullscreen Plugin (0.0.4)
ipOnConnect (0.2.2)
Nautilus (1.24)
Octolapse (0.3.4)
Preheat Button (0.3.1)
TouchUI (0.3.12)
TP-Link Smartplug (0.9.16)
Plus all the default apps supplied with Octoprint
Octoprint Version 1.3.11
Octopi Version 0.16.0 on Raspberry Pi 3 B+ Rev 1.3

[chadlichty]

First off thanks so much for writing and supporting this plugin. I have a plugin that I hope to write but we shall see if I get around too it. I have the same issue when I go to print and the filament manager pops-up to confirm what filament I'm using. I have a similar set-up 7-inch touch screen. I'm just running Raspbian and launching Chromium in full-screen mode. I have included a photo of the touchUI issue and what the UI should look like.

[BillyBlaze]

I am unable to reproduce this issue; however looking at the screenshots I am pretty sure that the browser is bigger then your current screen.

If you don't have a confirmation screen, are you able to scroll down and see the footer?

Also what browser are you using? Because it looks like something else than Chromium.

[OutspokenPlanet]

Tried the two installs of Octoprint currently running TouchUI and both I'm unable to get to the "proceed" button, as the screen doesn't scroll. This seems unique to the 7" screen running chromium, my ios devices all display ok.

[hakkanicko]

Hi,

I have the same problem on my Raspberry Pi with a 7'' touch screen.

I managed to debug it on my Pi, and here is what I found :
My window,innerHeight is equal to 614, but the modal has a height set to 100%, which is calculated equals to 1024...
This value (1024) is set by the body, which as a height set to auto.
I tried to change the body height from auto to 100% and everything works fine.

Hope this information helps.

[hakkanicko]

Here is a workaround : in file /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css replace #touch body{width:100%;height:auto; by #touch body{width:100%;height:100%;.

[chadlichty]

Great I'll try this later on today

[stale]

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Woodjin]

Hello everybody,
I had the same issue.
Editing /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css solved my problem

But I have a new problem, since touchui.css was edited, the footer stays at the same place instead of staying at the bottom of the page.

I see the same behavior on each tab...

It is not too embarrassing, the only problem is that it prevents access to the first directory of the file tab with touchscreen.
To work around I created an empty folder beginning with "00-..." to set it in the first position.

Any ideas to make it cleaner?

Thank you in advance (and sorry for my english ;) )

[apristel]

Same issue here on a 7" touchscreen. I don't care, waiting on the 5" to arrive, but, figured someone would appreciate knowing.

Thanks

[nimaim]

Still an issue for me as well. Very annoying when I have to cancel a print and cannot do it from the interface. I don't run the TouchUI auto start stuff but just launch Chromium and localhost page in full screen mode. The fix above works but I have the same issue as @Woodjin above.

[Woodjin]

It seems that touchui.css file must be modified to add a parameter to apply the touchscreen resolution only on confirmation windows and leave #touch body height to auto to let the footer stay at the Bottom, but don't know how to do this and no reply since june 27th.
In my case I created a folder beginning by 00-**** on the folder tab to avoid being blocked in the navigation of files and let me use my touchscreen waiting a response.
I think you should get used to having the footer in the middle, fixing this problem doesn't seem to be a priority…
Regards,

[Woodjin]

Another idea: rotate touchscreen display by 90 degrees on pi confugration and setting touchui.css to default.
The resolution in width being greater than the height, it may solve the problem.
To be tested.
Regards,

[nimaim]

Thanks woodjin, unfortunately I have this case printed (https://www.thingiverse.com/thing:1585924) making it impossible to use it portrait mode. I guess I will have to live with the footer floating up to the top.

[Woodjin]

Or model a support to fit it in portrait mode with Fusion 360 or something else.
Until someone who can make the changes at the css file level shows up, I'm worried that there's no solution.
Knowing that it's not even sure portrait mode will fix the problem. it's only an idea, a possible workaround.
Regards,

[benr916]

Just adding to the collective. I just finished setting up OctoPrint with TouchUI on an RPi 3 and a Pi Foundation 7" Touchscreen. Everything works great except I cant see the "Proceed" buttons.

I also cant get Chromium to start up in kiosk mode on boot, but I guess thats another problem.

[Strat00s]

Seems like this is still going. At the end, I went with normal UI witch looks way better and cleaner and fits nicely onto the 7" screen. Touch UI is very useful for small screen, but for the 7", the default octorpint UI works just fine.

[BillyBlaze]

I am still unable to reproduce the issue and therefor unable to fix it. However I did some fine tweaking in the modals and hoped I resolved this issue.

Can anybody install TouchUI from the maintenance branch and tell me if its resolved?

1. Uninstall TouchUI
2. Install TouchUI from url with the following url
   https://github.com/BillyBlaze/OctoPrint-TouchUI/archive/maintenance.zip

[rcooklo]

I tested the TouchUI from https://github.com/BillyBlaze/OctoPrint-TouchUI/archive/maintenance.zip and it did resolve the dialog box problem. The problem showed up for me after updating to the latest Octoprint. I couldn't update my manually installed Octoprints (I have 3) because of the Python version error. So this time I used the latest OctoPI (2019-09-26-octopi-buster-lite-0.17.0.img) instead of manually installing. Maybe it is something in the OctoPi image causing the problem. I uploaded pictures of the broken dialog box from before the update, the working dialog from after updating, and the status bar that is mostly cut off on both the old and updated versions. Sorry they are upside down. Hopefully this helps, thanks for the updates.
I am using Raspberry Pi 3's with the 7" TouchScreen on all my Octoprints.
Also I used the backup and restore in Octoprint to configure the new OctoPi installs. This loaded all the plugins for me during restore.

[MattariOnline]

For the current version of TouchUI, I found out tonight that removing min-height:100vh; from #touch body .modal-scrollable .modal in octoprint_touchui\static\css\touchui.css allows the confirmation box to show up at a reasonable size, which then displays the Proceed and Cancel buttons; it honestly looks better that way too.
(Leaving this in both support tickets on this issue in hopes that the plugin author sees it.)

[barrettdent]

Also having this issue. Makes this plugin useless. Cannot restart or shutdown the server. Cannot cancel a print job. Anything that requires confirmation is suddenly impossible on my iPhone.

[MattariOnline]

Also having this issue. Makes this plugin useless. Cannot restart or shutdown the server. Cannot cancel a print job. Anything that requires confirmation is suddenly impossible on my iPhone.

If you haven't, try the temporary fix I mentioned above, or I went ahead and uploaded a .zip of the plugin with that file modified if that helps. You just gotta download to a PC and upload via local file. https://www.mediafire.com/file/4wpbl64ipb784l3/OctoPrint-TouchUI-modified.zip/file

Edit: I'm obviously not the dev, just someone who couldn't tolerate the bug for half an hour and so took a few hours to test until I found a working solution. Idek why he wanted the dialog to be full screen if it literally doesn't need it. It's just aesthetics, and it doesn't even look better that way imho (no offense, dev, as I love the plugin lol).

[barrettdent]

Thanks ordubis, I'm actually going to redo my OctoPi in the next couple days. I've got a few things I'm planning to change. Hoping to possibly see an update from the dev. If not, absolutely applying your fix! Can't keep running up 2 flights of stairs to cancel a print job. (Octoprint resumes the print if I try to kill it from the printer!)

[MattariOnline]

Ugh, I know..! I learned the hard way that you can’t cancel from the printer; I wish there was a plugin for that. I’m gonna be designing a shutdown button for my Pi, so maybe I’ll see if I can add a “cancel print” button as well lol From: barrettdent <[email protected]> Sent: Saturday, March 28, 2020 2:29 PM To: BillyBlaze/OctoPrint-TouchUI <[email protected]> Cc: ordubis <[email protected]>; Comment <[email protected]> Subject: Re: [BillyBlaze/OctoPrint-TouchUI] "Proceed" buttons won't fit (#296) Thanks ordubis, I'm actually going to redo my OctoPi in the next couple days. I've got a few things I'm planning to change. Hoping to possibly see an update from the dev. If not, absolutely applying your fix! Can't keep running up 2 flights of stairs to cancel a print job. (Octoprint resumes the print if you try to kill it from the printer!) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#296 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEUL5JAORM7AFTSXPDFAHYLRJY6YRANCNFSM4HHIAAGA> . <https://github.com/notifications/beacon/AEUL5JBYV3VGF6CBYSR5JH3RJY6YRA5CNFSM4HHIAAGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEQLTIPI.gif>

[TheTrueEvilGod]

Neither the maintenance branch nor the temporary fix worked for me.
But I think i found a workaround, which does not need a change in the css or reinstall. but it only works have of the time :( but atleast it works for aborting prints.
I found that the missing buttons are pushed of screen by the chrome address bar on my Android phone. So if I scroll down slightly, the address bar disappears, then the next time i click on abort, the buttons are displayed at the bottom of the screen.

This workaround is fiddly, because if you scroll to quickly the site will reload instead. And it doesnt work for temperature offset, because the site is too short and cannot be scrolled.

[TheTrueEvilGod]

UPDATE:
The combination of the Maintenance Branch and the temporary fix AND waiting one night (css caching?) did the trick for me.

[SidShetye]

This css bug is also present on Safari on iPhone 11 when browsing over to Octoprint. The workaround is to rotate the screen to landscape (width > height) but this really needs to fixed at the source. Nobody likes broken websites.

[thomaspurchas]

Quick hack to solve this issue (mostly) on iOS. Create a custom UI file containing this

#touch body .modal-scrollable {
    height: -webkit-fill-available !important
}

and then include it in your touch UI settings.

On iOS it will make the the model boxes scrollable so you can get to the buttons while the toolbar is visible.

Also hiding the iOS toolbar makes it possible to access the buttons.

[BillyBlaze]

Thanks for reproting, I removed all declarations with 100vh and refactored it a bit so that the common issue with the navigation bar is gone. Can somebody confirm this for me that it also worked for them? Some already confirmed its working for them.

1. Uninstall TouchUI
2. Install TouchUI with the link:
   https://github.com/BillyBlaze/OctoPrint-TouchUI/archive/maintenance.zip

[dadevil87]

After update to 0.3.15 and octoprint 1.4.2, I have the same issue described above: in confirmation screens (to stop the printing process or to confrim the spool in filament manager request screen, etc) it is not possible to see proceed or cancel buttons and it is not possible to scroll down to find them.
I'm using Raspeberry pi 4 model b and a touchscreen lcd 320x480 3,5''

[thariel]

Got the same issue after update of octoprint and touchui. No way to reach the buttons on the touchscreen.

[vegeto079]

Thanks for reproting, I removed all declarations with 100vh and refactored it a bit so that the common issue with the navigation bar is gone. Can somebody confirm this for me that it also worked for them? Some already confirmed its working for them.

1. Uninstall TouchUI
2. Install TouchUI with the link:
   https://github.com/BillyBlaze/OctoPrint-TouchUI/archive/maintenance.zip

This did not work for me, still the same exact issues with the buttons I need to push being off-screen. This version seems to have introduced other problems as well, such as the "down" arrow button next to a print existing on the same place as the Print button, so I can't press Print.

I also notice similar issues in vanilla Google Chrome, but there I can forcefully Zoom Out to see the buttons.

[Deadbot1]

Can confirm this bug here as well. Raspi4 with the official 7 inch touchscreen. Have tried all fixes to no avail. BillyBlaze...can you simply move the buttons to the top of the dialog box for the time being, till fixed correctly?

[juri74]

Hi,

I have the same problem on my Raspberry Pi with a 7'' touch screen.

I managed to debug it on my Pi, and here is what I found :
My window,innerHeight is equal to 614, but the modal has a height set to 100%, which is calculated equals to 1024...
This value (1024) is set by the body, which as a height set to auto.
I tried to change the body height from auto to 100% and everything works fine.

Hope this information helps.

hello i have the same issue, i have a raspberry pi3 b+ with a fresh octopi install and only touchui display plugin installed.
unfortunately i'm not good with linux. where i change the option body height from auto to 100%? thanks!

EDIT:
i was able to modify the touchui.css file
i removed min-height:100%; from #touch body .modal-scrollable .modal in octoprint_touchui\static\css\touchui.css
and small requester windows looks ok (like shutdown, reboot and so on) but bigger windows aren't displayed well (like config)
so i modified the body height from auto to 100% and all now working, except for the footer info that now interfere with buttons in some windows.
is there any way to get rid of the footer? at least until the bug is fixed
thanks again

FINAL EDIT:
i get rid of the footer!
it is working perfectly in my 800x480, 5" dsi touch screen.
in touchui.css i made this mods:

• removed min-height:100%; from #touch body .modal-scrollable .modal
• changed body height from auto to 100% in #touch body
• changed font size from 0.875rem to 0rem in #touch body .footer
• changed width and height from 1.25rem to 0rem in #touch body .footer ul li a

hope this can help other mates

[Xercium]

How can I find this file? I was looking trough SSH But I am unable to locate the file ;s
I'm kinda new to the raspberry stuff. Any assist would be greatly appreciated.

[PingoLoco]

How can I find this file? I was looking trough SSH But I am unable to locate the file ;s
I'm kinda new to the raspberry stuff. Any assist would be greatly appreciated.

find /home/pi -iname touchui.css

[SidShetye]

@BillyBlaze : Can you please reopen this issue? It's a problem again on the latest release 0.3.15

[dadevil87]

Hi Guys,
it looks like I found a solution for my specific situation.
In the past I follow these instructions fo install touch screen and use TOUCHUI plugin, but after last TOUCHUI update I had the issue to have not possiblity to scroll confirmation page.

https://community.octoprint.org/t/octoprint-raspberry-pi-4-3-5-touchscreen-configuration-raspbian-buster-goodtft-waveshare-xpt2046/13254

From what I can understand this method works without installing screen driver.

This time instead I made as follow (maybe some steps are not necessary, but I'm not an expert...)

I formatted Sd card and installed last version of Octoprint from 0, after that:

Step 1.

First of all enable SPI by using the terminal command:

raspi-config

Navigate to ‘Advanced options’ and then enable SPI

Reboot if needed through the command in the terminal:

sudo reboot

The touch screen should turn on and be white colored.
Step 2.

If your still running the Buster beta upgrade to the latest stable kernel

apt-get update –allow-releaseinfo-change

Give the following command to update and upgrade Raspian:

sudo apt-get update
sudo apt-get upgrade
sudo reboot

sudo rm -rf LCD-show
git clone https://github.com/goodtft/LCD-show.git
chmod -R 755 LCD-show
cd LCD-show/
sudo ./MHS35-show

(you can have some error, but we can fix them later) At this point you should see that screen is no more white.

Install Touchui plugin and then:

git clone https://github.com/BillyBlaze/OctoPrint-TouchUI-autostart.git ~/TouchUI-autostart/

sudo ~/TouchUI-autostart/helpers/install

I had the following error:

Installing dependencies (xinit xinput xserver-xorg xserver-xorg-video-fbdev x11-xserver-utils matchbox unclutter chromium-browser):

• failed

So I used:

sudo apt --fix-broken install

and again:

sudo ~/TouchUI-autostart/helpers/install

And everything works!

It is only slower in response that before and I had to reactivate the picam from raspi-config.

Hope it helps.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.