search

nt1m / material-framework

[Unmaintained] An easy to use material design based framework.
http://nt1m.github.io/material-framework
MIT License
388 stars 86 forks source link

(regression) text inputs are no longer aligned correctly with icon-buttons #180

Open PalmerAL opened 9 years ago

PalmerAL commented 9 years ago

Appears to be caused by 7944359e6db9b5760bb85ab07923dc1eff909ed6, specifically the change in padding for text inputs at https://github.com/nt1m/material-framework/commit/7944359e6db9b5760bb85ab07923dc1eff909ed6#diff-af68e2ad3fd9d7a16efecb33a3a11b96L481. Probably, this change should apply to dropdowns only, and not text inputs.

nt1m commented 9 years ago

Screenshot ?

PalmerAL commented 9 years ago

image

The words "untitled document" (in a text input) aren't aligned with the buttons. (You may have to clear the cache to get this to appear in scratchpad)

PalmerAL commented 9 years ago

There's also another regression where adding margins >0.5em to text inputs makes letters with descenders (like g) get cut off. (you can see this in scratchpad's map input dialog).

nt1m commented 9 years ago

I can't reproduce the second issue, the letter g seems to render fine to me. As for the first issue, this new padding is consistent with the spec, which asks for more padding on top than on bottom, and which also asks for bottom margin to compensate the smaller bottom padding. Although, I agree it's better to have a consistent padding on top and on bottom.

nt1m commented 9 years ago

So the fix here is to remove the bottom margin, and use padding: 0.75em 0; Can you submit a PR ? I won't get to it until friday unfortunately.

PalmerAL commented 9 years ago

I won't have time for this for another week or two, but I should be able to get it by the 15th.

PalmerAL commented 9 years ago

I'm not sure this is actually fixable. The issue is that the spec says that text-inputs should be 3em tall, while toolbar buttons are 2em tall. There's not a good way to fix this that doesn't break other things. For scratchpad, I'll probably use custom css to fix this.

(Also, the text-inputs were missing the margin-bottom, filed #183 about this).

nt1m commented 9 years ago

@PalmerAL Using padding: 0.75em 0; should fix your issue, and using that by default should probably be more convenient. Anyway, I'm fine either way with this solution or #183.

PalmerAL commented 9 years ago

(#183 wasn't related to this - actually, it makes this specific problem worse. However, it improves compliance with the spec.)

Changing the padding and removing the margin works for scratchpad, but it also changes the way the text in the input is positioned:

screen shot 2015-07-15 at 4 09 08 pm screen shot 2015-07-15 at 4 09 15 pm

This doesn't match the spec, and also doesn't look as good.