U4-7564 - "Save and publish" button menu skewed [7.4.0-beta]

Created by Lee Kelleher 17 Dec 2015, 18:36:14 Updated by Mads Rasmussen 07 Jan 2016, 20:35:51

In 7.4.0 beta, the menu for the "Save and publish" button doesn't display correctly. See attached screengrab.

I'm using Chrome v47.0.2526.106 (on Windows 10).

1 Attachments

Comments

Sebastiaan Janssen 17 Dec 2015, 18:41:53

Hmm, try clearing your broswer cache (thoroughly). I can't repro. What exact resolution does your browser say it has? It may be some cutoff resolution.


Lee Kelleher 17 Dec 2015, 18:46:11

@sebastiaan My monitor is 1680x1050 and Chrome dev tools says the viewport is 1680x949.


Simon Busborg 06 Jan 2016, 13:43:22

@leekelleher I wasn't able to reproduce this issue.

I've tested it in: Chrome v47.0.2526.106 on Windows 10 Firefox v42.0 on Windows 10 Edge v25.10586.0.0 on Windows 10

Chrome v47.0.2526.106 on OSX 10.11.2 Firefox v42.0 on OSX 10.11.2 Safari v9.0.2 on OSX 10.11.2

Have you been able to reproduce this again or stumbled upon the issue since last?

/ Simon


Lee Kelleher 06 Jan 2016, 13:57:49

Hi @simonbusborg - I haven't checked the 7.4 beta since.

I'm using a Surface Pro 3 ... I'm not sure if that's relevant? (e.g. it might be treated like a tablet?)

Maybe we can close off this ticket, until someone else experiences it?


Simon Busborg 07 Jan 2016, 10:21:05

Hi @leekelleher,

So I tested it on a Surface and got the same result as you. We get this "bug" because of how bootstrap handles dropdowns on mobile/tablets. Bootstrap detect Suface as a tablet, and therefor pushed an element to the DOM called dropdown-backdrop. Disabling this will fix the "bug". But we need to be aware of this taken from http://getbootstrap.com/javascript/

''"On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile."''

Since it's a very old Bootstrap we're using I took the liberty to just add .btn-group .dropdown-backdrop display: none so that the element wouldn't appear in the DOM anymore.

I've already done a bunch of testing, but I'll create a PR for this and make sure it's proper tested by others as well.


Lee Kelleher 07 Jan 2016, 10:24:57

Thanks @simonbusborg, good detective work!


Simon Busborg 07 Jan 2016, 10:29:55

PR: https://github.com/umbraco/Umbraco-CMS/pull/1001

It's possible to test this in Edge, enter developer tools > emulator and choose Windows 10 Mobile as Browser profile, and choose Microsoft Edge, Windows 10 Mobile in User agent string.


Mads Rasmussen 07 Jan 2016, 20:34:29

I have tested the way you described and it seems to work good.


Priority: Normal

Type: Cosmetics

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions: 7.4.0

Due in version: 7.4.0

Sprint: Sprint 6

Story Points:

Cycle: