Dynamic scaling

[Aeefire]

Hey guys,

I've tried to dynamically resize the keyboard (i.e. to the window width) but only had very limited success. Only the background of the keyboard resizes according to the window. Is there a way to dynamically resize the keyboard, eventually including font size etc.? (e.g. for usage on mobile devices)

Thanks in advance for your hints!

[Mottie]

Hi @Aeefire!

The included jQuery UI based theme adds media queries to resize the keyboard; while it's not dynamic, it is easier to maintain.

To change the key size, change the size of the font (see FAQ).

To dynamically change the keys you'll need to change the font and button size. In this demo, I switched to use the keyboard-basic.css, which doesn't include any media queries, and I am using vw and vh units to increase the font size as the view port gets narrower. It's not perfectly tweaked since I don't know your target viewport size, but it should give you a general idea of how to accomplish it.

.ui-keyboard span {
  font-size: calc(2em - 1vw);
}
.ui-keyboard-button {
  height: calc(2em - 1vh);
  line-height: calc(2em - 1vh);
  min-width: calc(2em - 5vw);
  margin: .2em;
  cursor: pointer;
}
/* increased specificity to override repositioning style */
div.ui-keyboard button.ui-keyboard-button.ui-keyboard-actionkey > span {
  position: static;
  font-size: calc(.5em + 1vw);
}

If you want to do the opposite and decrease the font size as the viewport narrows, use something like font-size: 2vw instead of calc(..); but be careful as the font becomes unreadably small at very narrow widths.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.