U4-5313 - Buttons overlap scrollbar with overflow horizontal

Created by Bjarne Fyrstenborg 05 Aug 2014, 15:47:08 Updated by Matthew 25 Nov 2014, 16:44:19

Relates to: U4-5330

When you have a property editor that might use more space horizonal, e.g. a table editor or matrix editor, depending on the screen resolution it might display a horizontal scrollbar because of the overflow, which is okay. However the horizontal scrollbar is the coveret by the buttons placeholder and only a very small area the the left and right to access the scrollbar.

/umbraco/assets/css/umbraco.css have the following style: .umb-panel.editor-breadcrumb .umb-panel-body, .umb-panel.editor-breadcrumb .umb-bottom-bar { bottom: 40px!Important; }

However if it's change to this, there isn't a gap between the breadcrumb and scrollbar and the buttons placeholder doesn't cover/overlap the scrollbar. Still when no horizontal scrollbar the buttons are displayed fine: .umb-panel.editor-breadcrumb .umb-panel-body, .umb-panel.editor-breadcrumb .umb-bottom-bar { bottom: 30px!Important; } .umb-tab-buttons.umb-bottom-bar { bottom: 50px!Important; }

4 Attachments


Bjarne Fyrstenborg 14 Aug 2014, 23:13:38

Pull request submitted: https://github.com/umbraco/Umbraco-CMS/pull/450

Matthew 25 Nov 2014, 16:44:19

This is still an issue in the Umbraco 7.2 beta 2. I can tell that the styles have been updated on the relevant classes, but my scroll bar is still being covered by the buttons in both Chrome and FireFox. I am using a deeply nested Archetype, btw.

Priority: Normal

Type: Usability Problem

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.1.4

Due in version: 7.1.5


Story Points: