Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Temperature preset dropdown wrapping in Chrome on 1.3.5.r2 #2059
What were you doing?
Clicking dropdown to select a temperature preset causes the dropdown button to wrap to a new line.
Works fine in Edge and Internet Explorer, just happens in Chrome. Tested at a variety of window widths and font zoom percentages (both below and above 100%). I will also point out that the new +/- rich temperature editor all wraps to two lines in the TouchUI version, although I am not sure that's your porblem.
What did you expect to happen?
Everything to stay on the same line.
What happened instead?
I got a new line!
Did the same happen when running OctoPrint in safe mode?
Did not attempt
Branch & Commit or Version of OctoPrint
Operating System running OctoPrint
Windows 10 64-bit
Printer model & used firmware incl. version
Browser and Version of Browser, Operating System running Browser
Chrome 60 64-bit.
Link to octoprint.log
Link to contents of terminal tab or serial.log
The item causing it is the dropdown-backdrop div being inserted by bootstrap between the blue buttons. This div is added because bootstrap wants to properly allow the user to click outside the dropdown to close it on iOS and is
Screenshot(s)/video(s) showing the problem:
I have read the FAQ.
@well that is very interesting. Note that the dropdown arrow does not change size at all when you click it. The CSS rule that makes it have a left/right margin of 8px is
I disabled all my plugins in both Chrome and OctoPrint and had the same results. Knowing that the div is only added if touch support is found in the browser, I went into chrome://flags and changed "Touch Events API" from Automatic (the default) to Off. My dropdown then works as yours does, so it seems that your Automatic is off and my Automatic is on. Windows 10 reports "Touch support with 8 touch points" in the system properties, so I am guessing that is what Chrome is going off of.
I guess the other option is to fix the selector to be
So it seems the CSS will need to be re-evaluated for all dropdowns (is this the only one?) to make sure they don't rely on using the
Ahhh, yeah I have no touch capability on my PC (also windows 10).
I just tried on my android tablet with chrome and yep, same issue you have, the dropdown wraps. I guess it's a touch display thing. Enabling touch events in chrome on the PC also then makes it wrap.
Yeah (sad face emoji) I did some quick selectors and found tons of other things that would get included (over 400 in the case of
I don't know if there are any other "patches" added to the static js/less but that could fix it. EDIT: Just this change fixes it, although I am not sure if it still works properly on iOS.
added a commit
Aug 25, 2017
@CapnBry thanks mate, that patch indeed also fixed it here and doesn't appear to have any negative consequences across browsers (tested a bunch of them, also on mobile).
Just pushed it to
FYI; This touch event feature detection by bootstrap will work on mobile, however looking at the feature detection, it will not work for IE touch.
Here is a list of why its bad to use this (taken from Modernizr):
Agreed. This is a bit of a hack in bootstrap to begin with and it keying off the document having ontouchstart is widely broad for its intended purpose. For the purposes of this ticket though, I've switched 1.3.5rc3 and it is resolved. I'd also not seen any other weirdness since I changed my local source 4 days ago so I am going to close this if that's ok.