452493 - Smaller search box looks broken if text only fills one line

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task)

Description

[David Tenser [:djst]]

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.

Comment 1

[David Tenser [:djst]]

Attachment: Text on one row only

Comment 2

[David Tenser [:djst]]

Attachment: Text on three rows

Comment 3

[David Tenser [:djst]]

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.

Comment 4

[David Tenser [:djst]]

Attachment: Text on two rows -- the normal case

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

Comment 5

[David Tenser [:djst]]

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.

Comment 6

[Paul Craciunoiu [:paulc]]

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.

Comment 7

[David Tenser [:djst]]

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). :)

Comment 8

[Paul Craciunoiu [:paulc]]

(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.

Comment 9

[Paul Craciunoiu [:paulc]]

Attachment: 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)

Comment 10

[David Tenser [:djst]]

Looks good to me based on the attachment. Needs to be tested on Windows+Mac and on other browsers.

Comment 11

[Paul Craciunoiu [:paulc]]

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

Comment 12

[raymond [:retornam] (inactive)]

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

Comment 13

[Paul Craciunoiu [:paulc]]

Attachment: 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

Comment 14

[Paul Craciunoiu [:paulc]]

(In reply to comment #13)
> This is the patch that I committed to production 
I meant staging, of couse. Raymond: ping?

Comment 15

[raymond [:retornam] (inactive)]

broken in opera

Comment 16

[raymond [:retornam] (inactive)]

Attachment: Broken in Opera

Comment 17

[Paul Craciunoiu [:paulc]]

(In reply to comment #16)
> Created an attachment (id=390942) [details]
> Broken in Opera
Raymond can you please test on stage?

Comment 18

[raymond [:retornam] (inactive)]

http://screencast.com/t/OkXq1aAXEjt in ie7
http://screencast.com/t/zYxM1vwMU  in Chrome 
http://screencast.com/t/sdAhX05fs5 in safari Version 4.0.2
http://screencast.com/t/rsIxoawn in  opera 10.00 Beta 2
http://screencast.com/t/6dZbB5X1lHZ in firefox 3.5.1

Comment 19

[Paul Craciunoiu [:paulc]]

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.

Comment 20

[Paul Craciunoiu [:paulc]]

Attachment: 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.

Comment 21

[[:Cww]]

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

Eric isn't reviewing patches anymore AFAIK.

Comment 22

[James Socol [:jsocol, :james]]

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.