Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PalmerAL opened this issue Jun 30, 2015 · 9 comments
Open

Comments

@PalmerAL
Copy link
Contributor

Appears to be caused by 7944359, specifically the change in padding for text inputs at 7944359#diff-af68e2ad3fd9d7a16efecb33a3a11b96L481. Probably, this change should apply to dropdowns only, and not text inputs.

@nt1m
Copy link
Owner

nt1m commented Jul 1, 2015

Screenshot ?

@PalmerAL
Copy link
Contributor Author

PalmerAL commented Jul 1, 2015

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
Copy link
Contributor Author

PalmerAL commented Jul 1, 2015

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
Copy link
Owner

nt1m commented Jul 1, 2015

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
Copy link
Owner

nt1m commented Jul 1, 2015

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
Copy link
Contributor Author

PalmerAL commented Jul 2, 2015

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

@PalmerAL
Copy link
Contributor Author

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
Copy link
Owner

nt1m commented Jul 15, 2015

@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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants