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

VERIFIED FIXED in mozilla29

Status

()

defect
VERIFIED FIXED
8 years ago
5 years ago

People

(Reporter: gmoulin.dev, Assigned: roc)

Tracking

Trunk
mozilla29
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [good first verify])

Attachments

(1 attachment)

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
Duplicate of this bug: 677164
Duplicate of this bug: 681395
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.
Duplicate of this bug: 832199
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.
Posted patch fixSplinter Review
Assignee: nobody → roc
Attachment #8360176 - Flags: review?(matspal)
Attachment #8360176 - Flags: review?(matspal) → review+
https://hg.mozilla.org/mozilla-central/rev/3d2f331a57a4
Status: NEW → RESOLVED
Closed: 6 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.