Category names text cropped in search pulldown selects

VERIFIED FIXED

Status

addons.mozilla.org Graveyard
Public Pages
--
major
VERIFIED FIXED
11 years ago
2 years ago

People

(Reporter: stephend, Assigned: Chris Pollett)

Tracking

Details

Attachments

(5 attachments)

(Reporter)

Description

11 years ago
Created attachment 301220 [details]
Screenshot

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

See screenshot; this happens on all platforms.
(Reporter)

Updated

11 years ago
Summary: Category-select pulldowns not auto-fitted to their category names → Category-select pulldowns not auto-sized to their category names
(Reporter)

Updated

11 years ago
Summary: Category-select pulldowns not auto-sized to their category names → Category names text cropped in search pulldown selects
(Assignee)

Comment 1

11 years ago
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?
Status: NEW → ASSIGNED

Comment 2

11 years ago
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.
(Assignee)

Updated

11 years ago
Assignee: nobody → cpollett
Status: ASSIGNED → NEW
(Assignee)

Comment 3

11 years ago
Created attachment 305603 [details]
Screenshot 1
(Assignee)

Comment 4

11 years ago
Created attachment 305605 [details]
Screenshot 2
(Assignee)

Comment 5

11 years ago
Created attachment 305606 [details]
Screenshot 3
(Assignee)

Comment 6

11 years ago
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?
(Reporter)

Comment 7

11 years ago
"Interface Customizations" has been/will be renamed "Themes & Appearance" per https://bugzilla.mozilla.org/show_bug.cgi?id=396741#c11.
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.
(Assignee)

Comment 9

11 years ago
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?
(Assignee)

Comment 10

10 years ago
Created attachment 305812 [details] [diff] [review]
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.
(Assignee)

Updated

10 years ago
Attachment #305812 - Flags: review?(stephen.donner)
Attachment #305812 - Flags: review?(morgamic)
Attachment #305812 - Flags: review?(fwenzel)
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?
(Assignee)

Comment 12

10 years ago
I got it  following the link on stephend's comment #7.
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?
Attachment #305812 - Flags: review?(morgamic) → review?(craigcook.bugz)
(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.
(Assignee)

Comment 15

10 years ago
Patches that fixed this has been applied
Status: NEW → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → FIXED
(Reporter)

Comment 16

10 years ago
IE 6's pulldown length is ginormous:

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

(Looks pretty OK in the other browsers.)
(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.
(Reporter)

Comment 18

10 years ago
Verified FIXED; thanks for the explanation in comment 17, Craig.  This is much better that it was before, on all platforms/browsers.
Status: RESOLVED → VERIFIED
Attachment #305812 - Flags: review?(stephen.donner)
Attachment #305812 - Flags: review?(fwenzel)
Attachment #305812 - Flags: review?(craigcook.bugz)
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.