search

Mottie / Keyboard

Virtual Keyboard using jQuery ~
http://mottie.github.io/Keyboard/
Other
1.77k stars 722 forks source link

Empty keys not in line with other keys after changing font-size #801

Closed JanHergenhan closed 3 years ago

JanHergenhan commented 3 years ago

Hi, first of all thank you very much for this very helpful and well documented library.

I have a problem with {empty} keys (and it also concerns the space key): I changed the font-size of my keys using your recommendation to set .ui-keyboard span to a different value. I also adjusted the size of the buttons using .ui-keyboard-button.

However, it seems like {empty} keys are not exactly in line with non-empty keys any more, but some pixels below. This can be seen in your demo with the space key. It becomes more apparent when the font-size is increased further.

In layouts with many empty keys (eg something with an AltGr layer) this leads to varying height of the keyboard when switching between layers.

I already did some investigation: Disabling the font setting in the .ui-keyboard-empty span, .ui-keyboard-space span class 'lifted' the space key. For common empty keys, it is necessary to additionally put some text into the empty <span class="ui-keyboard-text"></span>.

So the question is: is there really a bug or did I just miss some setting?

Mottie commented 3 years ago

Hi @JanHergenhan!

In the demo that was shared, the keyboard button size is set using px. To maintain the proper size ratios, all keyboard sizes should be set using ems. The FAQ includes an example of how the keyboard overall size can be changed.

The .ui-keyboard-empty span has a font set to 0/0 so it should be effected, but if you need to adjust the height, try tweaking the line-height.

JanHergenhan commented 3 years ago

Hi,

thanks for the quick response.

In the end, I found in one of your other demos that you could use vertical-align: middle in the .ui-keyboard-button class. That solved my issue, no other changes necessary...

I'm closing the issue.