Widgets with expected same-height are of different height and misaligned
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Aug 4 2016, 6:26 PM

Description

As of v0.17.7 widgets (ButtonWidget, TextInputWidget, DropdownInputWidget) are of different height and therefore misaligned.

T142115 OOjs UI Demos 2016-08-04.png (95×649 px, 18 KB)

Details

	Subject	Repo	Branch	Lines +/-
	MediaWiki theme: Fix misalignment of widgets by applying pixel `min-height`	oojs/ui	master	+12 -15

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	None	T130691 Sub-pixel rendering layout issues with `em` or `%` relative units (tracking)
Resolved	Volker_E	T113495 Buttons in ButtonGroupWidget don't have same height/are misaligned
Resolved	Volker_E	T142115 Widgets with expected same-height are of different height and misaligned

Event Timeline

Volker_E created this task.Aug 4 2016, 6:26 PM

Restricted Application added a project: UI-Standardization. · View Herald TranscriptAug 4 2016, 6:26 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Volker_E updated the task description. (Show Details)Aug 4 2016, 6:27 PM

Volker_E added a parent task: T113495: Buttons in ButtonGroupWidget don't have same height/are misaligned.

(Are they really all expected to have the same height? With the current "flat" design, height could be an important visual cue.)

@matmarex There has been questions elsewhere about problems of differing inputs and buttons like in T131810: Can't tell what's a button in search forms (mw-inputbox-input and mw-ui-button look identical). As much as I understand the sentiment and possible problems of current quite similar looks for user experience – it's a different problem. We won't help any user to better grasp the different widget actions by letting different height of 30.78px for ButtonWidget, 29.78px for TextInputWidget and 29.11px for DropdownWidget further exist. Quite the contrary, IMHO it just makes the library look amateurish and erroneous.

Right, sorry, that was a very off-topic comment.

Change 303338 had a related patch set uploaded (by VolkerE):
MediaWiki theme: Fix misalignment of widgets by applying pixel min-height

https://gerrit.wikimedia.org/r/303338

Volker_E added a project: Patch-For-Review.Aug 6 2016, 4:11 AM

Volker_E moved this task from Backlog to Review on the UI-Standardization-Kanban board.

Volker_E triaged this task as High priority.Aug 11 2016, 12:14 AM

Volker_E moved this task from Backlog to Reviewing on the OOUI board.

Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Sep 10 2016, 12:24 AM

Jdforrester-WMF closed this task as Resolved.Nov 29 2016, 11:16 PM

Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.18.0); removed Patch-For-Review, OOUI.

Volker_E moved this task from Review to Done on the UI-Standardization-Kanban board.Dec 5 2016, 8:07 PM

Change 303338 abandoned by VolkerE:
MediaWiki theme: Fix misalignment of widgets by applying pixel min-height

Reason:
Resolved through several other patches in the meantime :)