Input field padding is unbalanced affecting vertical alignment of text (Flow design clean-up)
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Pginer-WMF
	Dec 24 2014, 4:28 PM

Description

For input fields, top and bottom padding has different values which makes text not being vertically aligned.

The current value for padding is:

padding: .4em .3em .2em .6em;

This means that top padding is 0.4 em while bottom padding is 0.2 em. This gets noticeable the bigger the font is. In particular this was identified in the particular case of Flow (as illustrated below) but it seems to apply elsewhere.

Screen_Shot_2014-12-24_at_17.17.24.png (222×712 px, 29 KB)

Screen_Shot_2014-12-24_at_17.17.20.png (224×706 px, 30 KB)

Making both top and bottom padding to be 0.3em would center the text while keeping the overall dimensions consistent.

Details

	Subject	Repo	Branch	Lines +/-
	mediawiki.ui: Fix .mw-ui-input padding to be centered vertically	mediawiki/core	master	+1 -1

Customize query in gerrit

Related Objects

Mentioned In: rMW7b8c3c21af90: mediawiki.ui: Fix .mw-ui-input padding to be centered vertically

Event Timeline

Pginer-WMF created this task.Dec 24 2014, 4:28 PM

Pginer-WMF raised the priority of this task from to Needs Triage.

Pginer-WMF updated the task description. (Show Details)

Pginer-WMF added projects: UI-Standardization, StructuredDiscussions, Wikimedia-Design, Collaboration-Team-Triage.

Pginer-WMF subscribed.

Pginer-WMF added a project: good first task.Dec 24 2014, 4:31 PM

Pginer-WMF set Security to None.

Liuxinyu970226 subscribed.Dec 25 2014, 12:51 PM

where is source code? i want to work on this bug.

@Hiteshsofat: Thanks for your interest! You might want to start investigating the codebase of the Flow extension (though there are also might be stuff in MediaWiki core).
Furthermore, This page has general information about working on the codebase.

Hi @Hiteshsofat

It looks like this particular issue is not in Flow code, but in core mediawiki code. The file this is in seems to be: resources/src/mediawiki.ui/components/inputs.less
It's the padding: .4em .3em .2em .6em; line in there, that would have to change to padding: .3em .3em .3em .6em;, according to the bug report.

You'll have to take a closer look here on how to get started: get developer access, checkout the code, make changes & submit them. Once you manage to submit the code, link to it from here & we'll review it!

If you get stuck, let us know, we're here to help!

• Spage triaged this task as Medium priority.Dec 29 2014, 6:40 PM

• Spage subscribed.

I'm moving this into the backlog for an upcoming sprint.

• DannyH renamed this task from Design clean-up: Input field padding is unbalanced affecting vertical alignment of text to Input field padding is unbalanced affecting vertical alignment of text (Flow design clean-up).Dec 29 2014, 10:08 PM

• DannyH moved this task from Untriaged to Team discussion on the Collaboration-Team-Triage board.

Change 189419 had a related patch set uploaded (by Jarrettmunton):
Fix padding to be centered vertically.

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

Patch-For-Review

Before	After

matmarex closed this task as Resolved.Feb 14 2015, 11:49 AM

matmarex assigned this task to Jarrettmunton.

matmarex removed projects: Patch-For-Review, Collaboration-Team-Triage, Wikimedia-Design.

Change 189419 merged by jenkins-bot:
mediawiki.ui: Fix .mw-ui-input padding to be centered vertically

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

matmarex mentioned this in rMW7b8c3c21af90: mediawiki.ui: Fix .mw-ui-input padding to be centered vertically.Feb 14 2015, 11:53 AM

Liuxinyu970226 unsubscribed.Feb 15 2015, 11:16 AM

	F25083: Screen_Shot_2014-12-24_at_17.17.24.png
	Dec 24 2014, 4:28 PM

	F25085: Screen_Shot_2014-12-24_at_17.17.20.png
	Dec 24 2014, 4:28 PM

	F41096: pasted_file
	Feb 14 2015, 11:46 AM

	F41099: pasted_file
	Feb 14 2015, 11:46 AM

Input field padding is unbalanced affecting vertical alignment of text (Flow design clean-up)Closed, ResolvedPublicActions

Description

Details

Related Objects

Event Timeline

Input field padding is unbalanced affecting vertical alignment of text (Flow design clean-up)
Closed, ResolvedPublic
Actions