Page MenuHomePhabricator

Inconsistent padding between labels and input field depending on type of input and presense of help-message info icon button
Closed, ResolvedPublic

Description

The info icon button for help-messages in htmlform is taller than the usual label text, apparently causing extra spacing between label and input. Or this may just be due to the styling around the added oo-ui-fieldLayout-header div, which acts as a container, but was apparently only added to some elements outside of where help-messages are used.

Basically it's inconsistent:

image.png (753×1 px, 43 KB)

See how the spacing between the page title and display name labels and their inputs differs from that between the image and introduction labels and inputs. Image, display name, and page title are all the same kind of input (text).

Introduction, a textarea input, also differs.

  • Text label and input distance: 9px
  • Textarea label and input distance: 12px
  • Select label and input distance: 17px
  • Text label and input distance with helm-message icon: 17px

(Numbers based on a hidpi screen with various random rendering settings, but you get the idea.)

Event Timeline

Thanks for pointing this out. There's another issue with the current OOUI HTMLForm implementation, which let's the label's line-height be oversized. It is tackled in https://gerrit.wikimedia.org/r/#/c/335601/ – I'd like to wait for these patches to get merged before caring about this one.
An easy way out would be to give the help icon a position: absolute and remove it on this way from document flow.

Volker_E triaged this task as Medium priority.Feb 2 2017, 6:09 AM
Volker_E claimed this task.

That was resolved by absolute positioning of the help icons.