647813 - HTML5 Form Validation tooltips have a width limited to the <select> element width

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect)

Description

[gm]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; rv:2.0) Gecko/20100101 Firefox/4.0
Build Identifier: Mozilla/5.0 (Windows NT 6.1; rv:2.0) Gecko/20100101 Firefox/4.0

error message tooltip are truncated

Reproducible: Always

Steps to Reproduce:
1. open http://jsfiddle.net/gmoulin/mEAWh/
2. click "go" button
3. see the tooltip
Actual Results:  
error message tooltip for <select> is truncated

Expected Results:  
tooltip width should not be linked to its field width

The tooltip width is linked to the <select> width minus the "open dropdown button".

Comment 1

[alex_mayorga]

I can reproduce this on Mozilla/5.0 (Windows NT 6.0; rv:2.2a1pre) Gecko/20110404 Firefox/4.2a1pre ID:20110404030429

Comment 2

[AndreiD[QA]]

I can reproduce the issue on:
Mozilla/5.0 (Windows NT 6.1; rv:2.2a1pre) Gecko/20110404 Firefox/4.2a1pre

But it's unclear whether this is a bug or not, as the error message tooltip is truncated in other browsers, as well.
Remaining UNCONFIRMED.

Comment 3

[Alice0775 White]

Regression window:
Works(whole text is visible):
http://hg.mozilla.org/mozilla-central/rev/d4d8e47b84ee
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101202 Firefox/4.0b8pre ID:20101202005143
Fails(Text is cut off):
http://hg.mozilla.org/mozilla-central/rev/2f448cda82bd
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b8pre) Gecko/20101201 Firefox/4.0b8pre ID:20101202031658
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=d4d8e47b84ee&tochange=2f448cda82bd

Comment 4

[AndreiD[QA]]

In reply to comment 3

Regression window (builds used from mozilla central), on Win x86:

WORKS on:
ID :    Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101202 Firefox/4.0b8pre
Config: http://hg.mozilla.org/mozilla-central/rev/baa5ae44f0ba

REPRODUCIBLE on:
ID :    Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101203 Firefox/4.0b8pre
Config: http://hg.mozilla.org/mozilla-central/rev/0ff6d5984287

Setting bug as NEW.

Comment 5

[Mounir Lamouri (:mounir)]

It only happens with select elements: the popup size depends on the select element layout size.

Comment 6

[gm]

as i said ;)

Comment 7

[Mounir Lamouri (:mounir)]

BTW, according to the regression window [1], it is very likely that bug 595432 triggered this one. IOW, it might be related to how arrow panels work.

[1] https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=baa5ae44f0ba&tochange=0ff6d5984287

Comment 10

[Grant]

Same problem on both Firefox 5 and 6:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0
Mozilla/5.0 (Windows NT 6.1; rv:5.0) Gecko/20100101 Firefox/5.0

The tooltips don't just get truncated, though. Here's a fork of the reporter's example with the width of the <select> set to 1000px: http://jsfiddle.net/Q3jSk/
Notice how the border of the tooltip expands with the width of the <select>.

Comment 11

[Alice0775 White]

This was fixed by Bug 672254 .
Fixed range:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=23a7c8800e3f&tochange=e69bb10026f3

Comment 12

[Mounir Lamouri (:mounir)]

Does one of you knows off-hand what could cause this?

With bug 672254 fixed, the issue is less major because it's no longer truncated but the tooltip is really small thus very high, which is annoying to read.

Comment 14

[nemo]

This is particularly annoying with very narrow select lists with one or characters in the option, such as a credit card month/year or such.
http://m8y.org/tmp/testcase361.xhtml  simple demo that is totally unreadable.

I can't believe this bug has existed for years with no workaround.  Surely there must be some solution in the browser CSS? An "overflow: visible" ?  Changing where the label is attached?

BTW, haven't looked at how the validation error message positioning is done, but the message does not move when scrolling - it jump suddenly once scrolling stops.  A bit odd, like how javascript based positioning used to work before people moved to CSS.

Comment 15

[nemo]

Oh, and if anyone has a less-insane workaround than the one proposed in:
https://stackoverflow.com/questions/6735992/html-5-required-message-being-cropped
using wrapping or making the select element really wide, I'm all ears.

Right now all I can think of, is disabling HTML5 validation on select lists below a certain width. (For Firefox only of course)

Comment 16

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I think this happens because nsMenuFrame::IsSizedToPopup returns true when the anchor content is a <select>. That doesn't make sense any more. It probably made sense when nsMenuFrame was being used experimentally to draw the dropdown list for a <select> combobox, as it was when this code was added in 2002 in bug 128947.

Comment 17

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Attachment: fix

Comment 18

[Robert O'Callahan (:roc) (email my personal email if necessary)]

https://hg.mozilla.org/integration/mozilla-inbound/rev/3d2f331a57a4

Comment 19

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/3d2f331a57a4

Comment 20

[Ioana (away)]

gm, could you please verify that this is fixed for you in Firefox 29?

Comment 21

[gm]

confirmed working in aurora 29.0a2 on Ubuntu 13.10

Comment 22

[Ioana (away)]

Thanks :)