1317524 - [css-grid] <input type=number> does not stretch in the inline-axis

Status: RESOLVED WORKSFORME

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

Description

[Mats Palmgren (inactive)]

data:text/html,<div style="display:grid; grid:200px/600px"><input type=number></div>

Comment 1

[Mats Palmgren (inactive)]

Attachment: wip

The reason it doesn't work appears to be a definite 'inline-size' in the UA sheet.
It works if I change it to a 'min-inline-size' instead.
(FYI, a definite computed width/height inhibits CSS Align stretching:
https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch )

Do you think this change would be web-compatible?
I worry that if an author have set an explicit 'width' that is less than
20ch then this UA min-value will trump that (the author then needs to set
min-width:0 or whatever).
An alternative fix might be to remove this UA value and add an "intrinsic"
value in C++ (GetMinISize/GetPrefISize) instead, maybe?

Thoughts?

Comment 2

[Jonathan Watt [:jwatt]]

(In reply to Mats Palmgren (:mats) from comment #1)
> Do you think this change would be web-compatible?
> I worry that if an author have set an explicit 'width' that is less than
> 20ch then this UA min-value will trump that (the author then needs to set
> min-width:0 or whatever).

I expect that there's a reasonable number of sites that have done this, so I share that concern.

> An alternative fix might be to remove this UA value and add an "intrinsic"
> value in C++ (GetMinISize/GetPrefISize) instead, maybe?

I think that would be safer. It also seems more consistent with Chrome which doesn't appear to set inline-size/min-inline-size.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

This works now.