1450173 - input with date/time type doesn't center its contents, with "text-align:center"

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: Capture d’écran 2018-03-30 à 12.39.56.png

This is a spin-off of https://webcompat.com/issues/16209

Test case is at 
https://codepen.io/webcompat/pen/MVVeZr?editors=1100


<fieldset>
    <label>
        <input value="2018-03-30"
            type="date">
    </label>
    <label>
        <input value="05:15"
            type="time">
    </label>
</fieldset>

with 
label {display:flex;
       align-items:center;}
input {flex: 1 0 auto;
       text-align:center;}


In Chrome both fields are centered. 
In Firefox they are left aligned.

Comment 1

[Daniel Holbert [:dholbert]]

I guess the author is expecting "text-align:center" to center the contents of the input?  That's a somewhat reasonable expectation, though I don't know if the precise layout of these controls is specced at all.


(I don't recall the precise setup of the internals of these datetime widgets -- I think there's a flex container and there's a flex item (or maybe several) for the text and a flex item for the "x" clear-icon.  For "text-align" to have an effect, we'd need to be sure that property inherits down to a block around *just* the text, and we'd need that block to be as wide (or nearly as wide) as the input widget itself.)

Comment 2

[Daniel Holbert [:dholbert]]

Reduced testcase jsfiddle: https://jsfiddle.net/aj5drx4t/
Or just as data URI:
  data:text/html,<input type="date" style="width:30em; text-align:center">

The "mm/dd/yyyy" text is centered in Chrome and Edge, but not in Firefox.

Comment 3

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1450173 - Allow the datetime wrapper to grow so that you can e.g. align its contents using text-align. r=dholbert

Also drive-by remove some useless prefixes since user-select was unprefixed in
bug 1492739.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4172c250e867
Allow the datetime wrapper to grow so that you can e.g. align its contents using text-align. r=dholbert

Comment 7

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/4172c250e867