U4-7906 - Button alignment is all over the place

Created by Rune Strand 05 Feb 2016, 10:12:38 Updated by Simon Busborg 10 Feb 2016, 15:39:26

Button alignment in control groups is very inconsistent across the BO, especially in prevalue editors.

{{.btn-small}} is used in conjunction with input fields which makes the buttons smaller and creates the alignment issues. (screenshot 1)

New dialogs (overlays) don't use {{.form-horizontal}} which makes inputs and button behave differently. (screenshot 2)

2 Attachments


Bjarne Fyrstenborg 05 Feb 2016, 12:52:43

I think if we use btn-default class instead of btn-small when the button is next to a textbox, it seems to fit in height.

In this PR https://github.com/umbraco/Umbraco-CMS/pull/1060 I fixed vertical-align: center; (invalid) to vertical-align: middle; (valid) .. but in the dialogs in seems to affect buttons next to inputs... I think it is because the inputs have a margin-bottom. So by using vertical-align: top; I think it will fix it.

Rune Strand 08 Feb 2016, 08:25:22

Yup, btn-default i the way to go :)

Fixed here https://github.com/umbraco/Umbraco-CMS/pull/1106

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal

Category: UI

Backwards Compatible: True

Fix Submitted:

Affected versions: 7.4.0

Due in version: 7.4.0

Sprint: Sprint 8

Story Points: