Open Bug 1526855 Opened 3 years ago Updated 2 years ago

select is wide when the label is wide in optgroup (not on Chrome)


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

65 Branch



Webcompat Priority revisit
Tracking Status
firefox65 --- affected
firefox66 --- affected
firefox67 --- affected


(Reporter: karlcow, Unassigned)



(Whiteboard: [webcompat] )


(1 file)

  1. Go to
    with Firefox, Chrome and Safari last nightly editions.

Firefox maximize to the length of the label text.
This breaks layout on small viewport like in

notice how the width of the widget is different in between browsers.

<optgroup label="aaaaaaaaaaaaaaaaaaaaaa"></optgroup>
<option value="en-CA">1</option>
<option selected="" value="fr-CA">2</option>

Flags: webcompat?

Simon, where should intrinsic sizing of <select> elements needing to ignore <optgroup>s be defined? Is that something your work covers?

Flags: needinfo?(zcorpan)
Priority: -- → P3

And that's really just the contribution of the <optgroup>'s label that needs to be ignored. If the <optgroup> is wrapping some <option>s, those <option>s need to contribute to the intrinsic size calculations. (What about margin/padding/borders on the <optgroup> itself? Not sure, didn't test...)

This would be's-labels

I hope to be able to work on form control rendering stuff some time in Q2, and if so I can look into this. It seems like an easy fix for the spec and can be tested with a reftest or even a testharness.js test.

Can you file an issue in whatwg/html?

Flags: needinfo?(zcorpan)

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

Webcompat Priority: --- → ?

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

Webcompat Priority: ? → revisit
You need to log in before you can comment on or make changes to this bug.