Closed Bug 647813 Opened 14 years ago Closed 11 years ago

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

Categories

(Core :: Layout: Form Controls, defect)

defect
Not set
normal

Tracking

()

VERIFIED FIXED
mozilla29

People

(Reporter: gmoulin.dev, Assigned: roc)

References

Details

(Whiteboard: [good first verify])

Attachments

(1 file)

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".
I can reproduce this on Mozilla/5.0 (Windows NT 6.0; rv:2.2a1pre) Gecko/20110404 Firefox/4.2a1pre ID:20110404030429
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.
Component: General → DOM: Core & HTML
Product: Firefox → Core
QA Contact: general → general
Version: unspecified → Trunk
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
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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows 7 → All
Hardware: x86 → All
It only happens with select elements: the popup size depends on the select element layout size.
Component: DOM: Core & HTML → Layout: Form Controls
QA Contact: general → layout.form-controls
Summary: HTML5 Form Validation tooltips are truncated → HTML5 Form Validation tooltips are truncated with select elements
as i said ;)
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
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>.
Summary: HTML5 Form Validation tooltips are truncated with select elements → HTML5 Form Validation tooltips have a width limited to the <select> element width
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.
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.
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)
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.
Attached patch fix (deleted) — Splinter Review
Assignee: nobody → roc
Attachment #8360176 - Flags: review?(matspal)
Attachment #8360176 - Flags: review?(matspal) → review+
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla29
gm, could you please verify that this is fixed for you in Firefox 29?
Flags: needinfo?(gmoulin.dev)
Whiteboard: [good first verify]
confirmed working in aurora 29.0a2 on Ubuntu 13.10
Flags: needinfo?(gmoulin.dev)
Thanks :)
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: