[MGNLUI-552] Vertical alignments and heights need review after update to HTML5 doctype Created: 15/Jan/13  Updated: 19/Jun/13  Resolved: 19/Jun/13

Status: Closed
Project: Magnolia UI
Component/s: design
Affects Version/s: None
Fix Version/s: 5.0

Type: Bug Priority: Neutral
Reporter: Mikaël Geljić Assignee: Aleksandr Pchelintcev
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
relation
is related to MGNLUI-736 Tools & Dev icon not properly aligned Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled

 Description   

Upgrade to vaadin 7 also brought in the HTML5 doctype, which treats height, line-height and vertical alignment of elements differently.

The sensible part is when using the CSS rule display:inline-block. There's a nice detailed explanation of this in the following thread: http://stackoverflow.com/questions/3003051/why-does-the-html5-doctype-mess-with-my-padding. We should make sure to use inline-block sparingly.

As a result, some elements in the UI are no longer in line with the guidelines for visual styles, including but not only:

  • Main launcher divet position
  • Apps launcher position
  • Content view padding around the table
  • Action bar position
  • Height and paddings of table lines and headers
  • Search bar position

Generated at Mon Feb 12 08:37:58 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.