[wp-trac] [WordPress Trac] #48420: Admin CSS: standardize form controls heights, alignments, etc.

[WordPress Trac]

#48420: Admin CSS: standardize form controls heights, alignments, etc.
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  5.4
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots 5-3-admin-css-       |     Focuses:  ui
  changes early has-patch needs-testing          |
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:  has-screenshots needs-patch 5-3-admin-css-changes early =>
     has-screenshots 5-3-admin-css-changes early has-patch needs-testing


Comment:

 [attachment:"48420.2.diff"] builds on the previous patch and adds a few
 more adjustments. There are still things to address but I think the patch
 is ready for a first round of testing.

 In the next days I'll try to summarize what the patch does and what's left
 to do. In the meantime, I'm at a point where a decision needs to be made.
 To make all form controls have by default a good vertical alignment
 (especially with visible labels or other text close to them) there are two
 possible options I can think of:
 - use flexbox: however, this would require a wrapper element as a flex
 container thus a considerable amount of markup output should be changed,
 which is not ideal
 - use CSS properties of the inline formatting context (inline-level boxes)
 like `vertical-align`

 I'd lean towards using `vertical-align: middle` for all form controls as
 it's able to align elements and text of different heights. However, this
 would imply that form controls shouldn't use top or bottom margins.

 Here's an example of default alignments using `vertical-align: middle`:

 [[Image(http://cldup.com/fXt9NF2N54.png)]]

 Other values like `top` or `baseline` would requireCSS adjustments on a
 case by case basis, which is something that would be great to avoid. One
 of the goals of these CSS changes is that all the WordPress admin form
 controls should just work out of the box and not require any further work
 or adjustments.

 Example with `vertical-align: top`:

 [[Image(http://cldup.com/P4d3G655rg.png)]]

 Example with `vertical-align: baseline`:

 [[Image(http://cldup.com/8f-DqeFX6I.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48420#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform