unreadable Header, when files are selected

[allo-]

before selecting:

after selecting:

[DeepDiver1975]

Please respect our contribution guideline and use the issue template as described:
https://github.com/owncloud/core/blob/master/CONTRIBUTING.md

[allo-]

too late, but the screenshots are quite obvious. Firefox 20, owncloud 5.0.5 (both latest versions anyway). server stuff is not relevant for design issues, and js-logs and such stuff should not be needed either.
steps to reproduce should be clear from the screenshots.

I think its just a html-layout issue, when the header element is inserted. As you see in before.png, the margin of the list-header is very low anyway.

[DeepDiver1975]

I will not discuss the necessity of the information we ask in the issue template.

Please add your client operating system and version as well please - thx

[DeepDiver1975]

@jancborchardt @raghunayyar can you please have a look? THX

[allo-]

Ubuntu 12.10 (Linux).

Not happening at a Ubuntu 12.04 with another firefox profile. I will have a look into my extensions / test with a clean profile as well.

[raghunayyar]

Can't reproduce on Chrome 26.0.1410.65 and Firefox 15.0.1 on Mac OSX.

[allo-]

Oh, got it. It depends on font-size.

With ubuntu 12.10 chromium its shifting only by 2-3px, and with a fresh firefox profile by 1px.
The thing about my normal profile: i set a minimum font-size.

Steps to reproduce:

• go to firefox preferences, content, fonts, advanced
• set a minimum font-size (here 15). Note that your minimum font-size needs to be smaller/equal than your default font-size, else firefox resets it.
• select one or more files in owncloud

with bigger font-sizes like 24, the effect even happens when no files are selected.

[Niduroki]

Can't reproduce this as well on Chromium 28.0.1468.0 .
In Firefox 20.0 and Konqueror 4.10.2 the header moves up a little bit … But not that much, just about 2px …

[Niduroki]

Ah … Can reproduce this with your steps …

I think this is related to css and em … (#2143)

[allo-]

What font-size did you try to reproduce it?

[Niduroki]

@allo-: 15, just as you mentioned it.

[allo-]

With font-size 24 as default-font-size (leaving minimum font-size as it is)

And with chromium and font-size (in advanced settings) set to "very large" (whatever this really means)

hope this helps

[MorrisJobke]

I can confirm this with font sizes greater than 16. Then the files header moves downwards and other elements don't fit in.

[raghunayyar]

Ok. This confirms that this issue is related to the all time problematic em to px conversion. Will do the conversion in the coming days. Self assigning.

[jancborchardt]

Yeah, this is a duplicate of #801 (error with small font sizes). We need to use px only, and I would also say to move the base font size to 16px (as smallest size), in regard to touch interfaces and general readability.

@raghunayyar big thanks for taking that up! Make sure to do it in small steps please (maybe start with personal page only, then files app, etc etc.), and only do the move to 16px after there’s no em in the code anymore.