How to make the gap between the buttons clickable?

Questions & Answers

The default theme uses the ".hg-button" selector to style each button and uses margins as separation. To make gaps clickable, the CSS needs to be edited so that buttons are styled on the ".hg-button span" instead.

Here's a quick example:

1const keyboard = new Keyboard({
2  theme: "my-theme", // < removes default theme class ".hg-theme-default"
3  onChange: (input) => onChange(input),
4  onKeyPress: (button) => onKeyPress(button),
5});
6

1.simple-keyboard {
2  max-width: 850px;
3}
4 
5.simple-keyboard .hg-row {
6  display: flex;
7}
8 
9.simple-keyboard .hg-row:not(:last-child) {
10  margin-bottom: unset;
11}
12 
13.simple-keyboard .hg-button {
14  padding: 2px;
15  flex: 1;
16  cursor: pointer;
17  user-select: none;
18  white-space: nowrap;
19}
20 
21.simple-keyboard .hg-row .hg-button:not(:last-child) {
22  margin-right: unset;
23}
24 
25.simple-keyboard .hg-button span {
26  display: flex;
27  min-height: 30px;
28  border: 1px solid black;
29  border-radius: 5px;
30  align-items: center;
31  justify-content: center;
32  padding: 0 5px;
33  box-sizing: border-box;
34}
35 
36.simple-keyboard .hg-button.hg-button-space {
37  flex: 10;
38}

Demos: JS (angular + vue)