261.57 KB, image/png
13.33 KB, image/png
15.00 KB, image/png
13.34 KB, image/png
3.07 KB, patch
|Details | Diff | Splinter Review|
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.
Summary: Category-select pulldowns not auto-fitted to their category names → Category-select pulldowns not auto-sized to their category names
Summary: Category-select pulldowns not auto-sized to their category names → Category names text cropped in search pulldown selects
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
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.
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?
"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.
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?
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.
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?
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.
Patches that fixed this has been applied
Status: NEW → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → FIXED
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.
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
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.