Combobox <select> text is overlapping the dropdown arrow button when setting narrow width

NEW
Unassigned

Status

()

--
minor
7 years ago
7 years ago

People

(Reporter: bigheadjer, Unassigned)

Tracking

({platform-parity, testcase})

6 Branch
x86
Mac OS X
platform-parity, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

7 years ago
Created attachment 559397 [details]
Side-by-side comparison of Select form on Google News on Firefox and Safari

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Build ID: 20110902133214

Steps to reproduce:

Loaded Google News.


Actual results:

The default font used inside form widgets are too large for certain sites and overflow the containing space.  This is noticeable in the language selection in Google News or on certain ASP sites (on my corporate Intranet so I can't post a screenshot from there).  It renders fine elsewhere (like for instance on this form).


Expected results:

The font should be smaller and the text should fit within the container.  I've attached a screenshot showing the same page as rendered in Safari.
Created attachment 559415 [details]
Reduced testcase

I'm pretty sure this is intentional.  They limit the <select>
width to 9.1em to save space in page layout - the full names
are available in the drop down menu anyway.

Yes, the default fonts are slightly larger in Firefox than
in Safari, this isn't a bug per se.  If you want Firefox to
use smaller fonts overall, then change it in Preferences.

There IS a bug displayed in the screenshot though -
the right part of the clipped text shouldn't overlap the
blue arrow button.

Updated

7 years ago
Severity: normal → minor
Status: UNCONFIRMED → NEW
Component: General → Layout: Form Controls
Ever confirmed: true
Keywords: pp, testcase
Product: Firefox → Core
QA Contact: general → layout.form-controls

Updated

7 years ago
Summary: Fonts inside default form widgets too large → Combobox <select> text is overlapping the dropdown arrow button when setting narrow width
(In reply to Mats Palmgren [:mats] from comment #1)
> There IS a bug displayed in the screenshot though -
> the right part of the clipped text shouldn't overlap the
> blue arrow button.

Does not happen with Firefox 5 on GNU/Linux. Which platform do you use?
I'm on OSX 10.7 and I can't reproduce the problem (so the reduced testcase is only
to show why the text doesn't fit, I don't know if it demonstrates the paint overlap).
I'm guessing it only occurs with the Aqua theme (in 10.6 and older).
(Reporter)

Comment 4

7 years ago
I'm on OSX 10.6.  Changing the font settings in Preferences changes the font in the page layout but does not affect the font inside the widget.  Attaching a screenshot.
(Reporter)

Comment 5

7 years ago
Created attachment 559446 [details]
Effect of changing font settings in Preferences
(In reply to comment #1)

> There IS a bug displayed in the screenshot though - the right part
> of the clipped text shouldn't overlap the blue arrow button.

Using Mats' testcase, I can't reproduce this on OS X 10.5.8, 10.6.8 or
10.7.1 (using FF 6.0.2).

(In reply to comment #4)

> Changing the font settings in Preferences changes the font in the
> page layout but does not affect the font inside the widget.

Is this	reproducible on other platforms (i.e. Windows or Linux)?

In any case I'm not sure it's a bug.
The STR from comment #0 is missing some detail.  I supply it here:

1) Visit http://news.google.com/

2) Select the Canada English edition.

For me, this reproduces the "clipped text overlapping the arrow
button" bug on OS X 10.5.8 and 10.6.8 (in FF 6.0.2), but not on OS X
10.7.1.

Does the "overlap" bug happen on other platforms (Windows or Linux)?
(In reply to Steven Michaud from comment #7)
> The STR from comment #0 is missing some detail.  I supply it here:
> 
> 1) Visit http://news.google.com/
> 
> 2) Select the Canada English edition.
> 
> For me, this reproduces the "clipped text overlapping the arrow
> button" bug on OS X 10.5.8 and 10.6.8 (in FF 6.0.2), but not on OS X
> 10.7.1.
> 
> Does the "overlap" bug happen on other platforms (Windows or Linux)?

Do you see the same bug with the testcase Mats uploaded? news.google.com doesn't provide the same content for everyone.
(Reporter)

Comment 9

7 years ago
You can get the Canadian English option by going to http://www.google.ca/
(Reporter)

Comment 10

7 years ago
(In reply to Jeremy Tan from comment #9)
> You can get the Canadian English option by going to http://www.google.ca/

Sorry, I mean http://news.google.ca/
> Do you see the same bug with the testcase Mats uploaded?

As I said in comment #6, no.
Created attachment 559462 [details]
Screenshot on Linux

The overlap also occurs in a recent Nightly build on Linux.
(the screenshot is from Screen Magnifier to make it easier to see)
The font inside the combobox widget is the OS-default font for such widgets, last I checked.  That's certainly the intent!
You need to log in before you can comment on or make changes to this bug.