Smaller search box looks broken if text only fills one line

RESOLVED FIXED in 1.4.1

Status

RESOLVED FIXED
10 years ago
9 years ago

People

(Reporter: djst, Assigned: jsocol)

Tracking

unspecified
1.4.1

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: sumo_only theme, URL)

Attachments

(6 attachments, 1 obsolete attachment)

(Reporter)

Description

10 years ago
In the Swedish locale, the text "Search the Knowledge Base" is translated into "Sök i kunskapsbasen," which only spans one row. This makes the search box look completely broken.

As a side-note, the text should actually break, as it's wider than the search box. But the underlying issue with the ugly appearance when only using one line probably needs to be fixed anyway.

Updated

10 years ago
Target Milestone: 0.7 → 0.8
(Reporter)

Comment 1

10 years ago
Created attachment 342047 [details]
Text on one row only
(Reporter)

Comment 2

10 years ago
Created attachment 342048 [details]
Text on three rows
(Reporter)

Comment 3

10 years ago
John, do you have any suggestions on how to fix this? For the one-row case, it should be a fairly simple thing to just make sure the search box still remains at the bottom. However, for the three-row case, I'm not sure how to best handle it.
(Reporter)

Comment 4

10 years ago
Created attachment 342050 [details]
Text on two rows -- the normal case

Just for reference, this is how it's supposed to look like. :)

Updated

10 years ago
Target Milestone: 0.8 → 0.9

Updated

10 years ago
Target Milestone: 0.9 → 1.1
(Reporter)

Updated

10 years ago
Target Milestone: 1.1 → Future
(Reporter)

Comment 5

9 years ago
Targeting to 1.4 to keep it on the radar. This makes the search box look very ugly, and the fix should be very trivial.
Assignee: nobody → paul.craciunoiu
Target Milestone: Future → 1.4
I have some ideas on this. They're not mutually exclusive:
1) Make sure the text does not overlap where it shouldn't (including outside the search box; forces text to be on 2 lines)
2) Make the search input of fixed position(i.e. it doesn't go "up" if text is only one line, or "down")
3) Make the font smaller (to allow 3 lines)
4) Make the text "box" as large as possible, as long as it looks good
5) Cut off text that is too long

The first two are pretty much required. We can also get a larger image, but that is more work. The one I'm skeptical about is 3) -- text too small is bad UX.
(Reporter)

Comment 7

9 years ago
I think 3) is pretty much required too if we want it to work for locales like fr - see http://support.mozilla.com/tiki-approve_staging_page.php?locale=fr

Feel free to experiment with those two extreme cases (1 line and 3 lines). :)
(In reply to comment #7)
> Feel free to experiment with those two extreme cases (1 line and 3 lines). :)
I'll do so, and post some screenshots soon.
Created attachment 387542 [details]
search box 1,2,3 lines in Fx3

Here's an implementation, those are actual screenshots from the page in Firefox 3. In this implementation, if the text goes past 3 lines, it simply doesn't show up (no scrollbar, no overlapping, just hidden).

My only concern is cross-browser compatibility. It should work fine, but there may be minor positioning issues (to be QA'd)
(Reporter)

Comment 10

9 years ago
Looks good to me based on the attachment. Needs to be tested on Windows+Mac and on other browsers.
I also tested with Georgia on Ubuntu and it looks just as good. Correcting myself, though, if the text exceeds 3 lines, it will go under the search input. I would think that's not a big issue, however, since we won't have over 3 lines. But if we do, the text needs to be even smaller.

I committed this in r29538 on stage. We need some QA on multiple browsers and OSs
http://screencast.com/t/l3US70Ajwm  on XP IE6
http://screencast.com/t/E65KP2c6p  on XP IE7
http://screencast.com/t/7ETy1PRkaG on Mac Safari 4
http://screencast.com/t/rvf9uXKa on XP Chrome.
Paul,can you resolve it so i can mark it as verified. Thanks
Created attachment 387754 [details] [diff] [review]
patch, v1

This is the patch that I committed to production for Raymond to test. Raymond, also, if you can test how it looks with 3 lines, that would be great! I set up a link for you here:
https://support-stage.mozilla.org/ro/kb/Clearing+private+data
Attachment #387754 - Flags: review?(smirkingsisyphus)
Attachment #387754 - Flags: review?(laura)
(In reply to comment #13)
> This is the patch that I committed to production 
I meant staging, of couse. Raymond: ping?
broken in opera
Created attachment 390942 [details]
Broken in Opera
(In reply to comment #16)
> Created an attachment (id=390942) [details]
> Broken in Opera
Raymond can you please test on stage?
It looks like for the first three the text should be a bit smaller and it could use less padding at the top. Perhaps a few pixels across all browsers would be fine.
Created attachment 392975 [details] [diff] [review]
patch to patch, v1

This will reduce the padding from the top by a bit, and center the text. With that, I think all cases display reasonably well. The trick here is using table-cell display to center the text vertically. That doesn't work so well on some browsers but overall it seems okay.

Waiting on David's input before we resolve this.

Also, Raymond: could you post the same screenshots for a search box with 2 rows? (which will be the most common)
E.g. German: http://support-stage.mozilla.org/de/kb/Private%20Daten%20l%C3%B6schen

Finally, I think if we start having locale-specific CSS files, we can address problems more specifically for other languages. See bug 438314 for that.
Attachment #390942 - Attachment is obsolete: true
Attachment #392975 - Flags: review?(smirkingsisyphus)
Attachment #387754 - Flags: review?(smirkingsisyphus)
Attachment #387754 - Flags: review?(laura)
(Assignee)

Updated

9 years ago
Assignee: paul.craciunoiu → jsocol
(Assignee)

Updated

9 years ago
Target Milestone: 1.4 → 1.4.1

Comment 21

9 years ago
Comment on attachment 392975 [details] [diff] [review]
patch to patch, v1

Eric isn't reviewing patches anymore AFAIK.
Attachment #392975 - Flags: review?(smirkingsisyphus) → review?(james)
(Assignee)

Comment 22

9 years ago
After looking in several locales, this seems fine now. I have not applied the new patch, but it doesn't seem to make it really better on any of the locales I checked (fr, de, ro, uk, en-US) so let's just leave it off.

Unfortunately, the browsers in which it doesn't look great are the ones that don't support "display: table-cell" (ie: IE). If necessary we can tweak the IE-only style sheets.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
(Assignee)

Updated

9 years ago
Attachment #392975 - Flags: review?(james)
(Reporter)

Updated

9 years ago
Whiteboard: sumo_only theme
You need to log in before you can comment on or make changes to this bug.