415504 - Category names text cropped in search pulldown selects

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Screenshot

Happens with both Firefox 2.0.0.x and Firefox 3 nightly builds.

See screenshot; this happens on all platforms.

Comment 1

[Chris Pollett]

I can reproduce the bug. It seems to only affect Firefox, it does not occur in Safari 3, or IE 7 on Vista (haven't checked earlier flavours). I noticed with Firefox and the other platforms that the select gadget and the word "within" seems slightly uneven with the search bar. Is this mentioned anywhere?

Comment 2

[Fred Wenzel [:wenzel]]

Good point, Chris. That does look weirdly shifted to the right hand side. I don't think we have a bug for it yet, but I suggest it to be fixed in conjunction with this bug, because both require changes to (probably) the same parts of the CSS file.

Comment 3

[Chris Pollett]

Attachment: Screenshot 1

Comment 4

[Chris Pollett]

Attachment: Screenshot 2

Comment 5

[Chris Pollett]

Attachment: Screenshot 3

Comment 6

[Chris Pollett]

So I've been tweaking the CSS for the search bar to try to fix this bug.
The longest possibility for the select tag right now is Interface Customizations.
My solution to fix this issue without changing the total size of the search bar is to give slightly more real estate to the select tag over the query input tag. I am not sure if this is good or bad. The first attached picture shows what this would look like if no add on category is selected yet, the second shows what it would look like is Interface Customizations is selected. There is a secondary issue that the page has a body min-width of 770 px which I assume was chosen for some reason. The last photo shows what my solution would like if someone narrows the screenwidth to 770. As you can see, the Interface Customizations option is chopped a little bit in this circumstance. My thought is this situation is somewhat less critical. Also I was thinking, if people thought more real estate was needed for the search bar then maybe the category names should be changed to something shorter?

Comment 7

[Stephen Donner [:stephend] Not actively reading bugmail]

"Interface Customizations" has been/will be renamed "Themes & Appearance" per https://bugzilla.mozilla.org/show_bug.cgi?id=396741#c11.

Comment 8

[Justin Scott [:fligtar]]

Changing the length of the text isn't a great solution as these will all be localized and some will end up way longer than they are already in other languages.

Comment 9

[Chris Pollett]

Well, with the change in name that stephend pointed out  Dictionaries & Encyclopedias is a longer string. What should the trade-off be between
string length and query box size? Is it okay to clip when someone re-sizes
the width down to 770px?

Comment 10

[Chris Pollett]

Attachment: Patch to revise screen.css

Here is a proposed revision to screen.css which displays the largest category name in English correctly. It also fixes an issue that when you resized the screen the min-width of the body was 770px, but different components had no min-width so collapsed oddly below the 770px width. At 770 pixels there is some
cropping in Firefox, not in Safari or IE.

Comment 11

[Fred Wenzel [:wenzel]]

It works, but it's even a little wide for me -- "Dictionaries and Encyclopedias" is not one of the category names I think, but I may be wrong, where did you find that one?

Comment 12

[Chris Pollett]

I got it  following the link on stephend's comment #7.

Comment 13

[Michael Morgan [:morgamic]]

Comment on attachment 305812 [details] [diff] [review]
Patch to revise screen.css

Craig can you take a look at this CSS and see if that makes sense?

Comment 14

[Craig Cook (:craigcook)]

(In reply to comment #13)
This works for me. A dropdown's natural width is determined by its longest option, but to achieve the desired layout an unnatural width had to be specified. The cropping is an unfortunate side effect of that. It'll still happen with longer localized strings, and when the font is scaled up, but defining a width is the only way to keep the fields side by side.

I also toyed with the idea of a smaller font-size in the category select, but wasn't happy with the result (it made the category seem less important), so just increasing the width is the best solution.

I haven't seen any issues with nested elements collapsing beyond 770px so I'll take your word for it, but if adding min-width to those elements fixes it then it certainly does no harm either.

I've made these changes to screen.css in my SVN so you can grab it from there.

Comment 15

[Chris Pollett]

Patches that fixed this has been applied

Comment 16

[Stephen Donner [:stephend] Not actively reading bugmail]

IE 6's pulldown length is ginormous:

http://img88.imageshack.us/my.php?image=picture6kd2.png

(Looks pretty OK in the other browsers.)

Comment 17

[Craig Cook (:craigcook)]

(In reply to comment #16)
> IE 6's pulldown length is ginormous:

The width is specified as a percentage of the parent element's width, and because IE6 doesn't support max-width the entire site's layout is fully-liquid in that browser (it's semi-liquid in browsers that support max-width). So in a very wide IE6 window, the menu will naturally be wider in proportion with the rest of the page.

Comment 18

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED; thanks for the explanation in comment 17, Craig.  This is much better that it was before, on all platforms/browsers.