Enlarging text in buttons, equal button size

[tobiasvandriessel]

How would I go about enlarging the text in buttons, without changing the size of the button itself?

[Mottie]

Hi @tobiasvandriessel!

The keyboard is styled using CSS.

The button min-width is set using em measurements. So you'll need to modify that and add a width set using pixels. The text is containing inside a <span> so you can target that element to change the font size (demo).

.ui-keyboard-button {
  height: 30px;
  width: 30px;
  min-width: 30px;
}
/* keys with more than one character inside */
.ui-keyboard-widekey {
  height: 30px;
  width: 45px;
}
.ui-keyboard-button span {
  font-size: 1.2em;
}

The button has an overflow: hidden; set on it, so you might need to make a custom layout using symbols.

Check out the FAQ and Theme wiki pages for more details.

[tobiasvandriessel]

Hi Mottie,

Thanks for your quick reply! I hoped there would be another way than your proposed solution, as it requires hardcoding, but I guess there is no helping it :p. I didn't give a lot of information initially as I thought it might distract from the question, but the reason I wished for another solution is that the application I'm building needs to scale to different screen resolutions and this solution requires some hardcoding. Anyhow, thanks for your reply and the issue can be closed now!

[Mottie]

The keyboard.css file has @media queries, maybe you can modify them to work in your situation?

[tobiasvandriessel]

Thanks for your follow-up reply, @media queries were indeed what I was thinking of to harcode! Have a great evening!