Bug 14454 – Truncated values in option pop-ups (used to affect united.com)

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Forms

[Gavin Sherlock]

At united.com the popup menus used to select the dates for a flight (left hand side of the page) have values which appear truncated.  Looks fine in Firefox.  Tested with r23841.

Compared to Firefox, the popups are the same width and the font is the same size, but WebKit leaves less room for the text.

[Alexey Proskuryakov]

*** Bug 11204 has been marked as a duplicate of this bug. ***

[Gavin Sherlock]

Added NeedsReduction keyword

[Sam Stigler]

Created attachment 17957 [details]
Reduction without adding any new code

Although this reduction is somewhat more true to form in that it stays with the original code of the page, look at reducedmore.html (the next attachment) for a much more succinct reduction; one that doesn't include any Javascript.

[Sam Stigler]

Created attachment 17958 [details]
More succinct (i.e., better) reduction

[Sam Stigler]

Comment on attachment 17958 [details]
More succinct (i.e., better) reduction

The issue appears to be that the width of <select> element is manually set too thin in its 'style' attribute.  If you remove the 'style' attribute from the <select> elements, they will behave as expected.

[David Kilzer (:ddkilzer)]

Thanks for the reduction, Sam!  This is clearly an Evangelism issue.

Bug 13610 is a similar evangelism issue for Hotwire.com email messages.

(In reply to comment #7)
> This is clearly an Evangelism issue.

As I wrote,

> Compared to Firefox, the popups are the same width and the font is the same
> size, but WebKit leaves less room for the text.

Can we offer the websites in question any solution that will work with both Firefox and Safari? Maybe WebKit's popup button inner metrics should be reconsidered?

[David Kilzer (:ddkilzer)]

(In reply to comment #8)
> > Compared to Firefox, the popups are the same width and the font is the same
> > size, but WebKit leaves less room for the text.
> 
> Can we offer the websites in question any solution that will work with both
> Firefox and Safari? Maybe WebKit's popup button inner metrics should be
> reconsidered?

At what point do we stop trying to fit the text into the element, though?  A style of "width: 1px"?

If we changed the font metrics (kerning, etc.) to match Firefox, would these pop-up buttons look out-of-place with the rest of the page in Safari?

Unless we can make a one-time change to the font metrics, it seems like this would be a slippery slope.

Another solution may be to use an ellipsis if we know the text won't fit in the width provided (assuming the ellipsis would fit itself!).

Does HTML5 have anything to say about fitting text into a pop-up button when you start changing the width style (on any input element)?

Actually, Firefox 3, which uses Aqua buttons, truncates the text just like Safari, so I don't think changes to WebKit should be considered.

[Julio Danni]

It's working fine to me with Chrome 4, webkit 532.5

[Gavin Sherlock]

Did you look at the reduction?  The reduction still shows the problem in Webkit r53178.  The united.com site has changed since I reported the bug, so can't be used to demonstrate it anymore.

[Julio Danni]

(In reply to comment #12)
> Did you look at the reduction?
Sorry, I did not. Anyway, I think this bug should be closed, since the page has changed and evangelism isn't needed anymore. I apologize if I'm wrong.

[David Kilzer (:ddkilzer)]

(In reply to comment #13)
> (In reply to comment #12)
> > Did you look at the reduction?
> Sorry, I did not. Anyway, I think this bug should be closed, since the page has
> changed and evangelism isn't needed anymore. I apologize if I'm wrong.

I think it should be kept open.