The main problem is that the backspace symbol is being automatically formatted as a smaller (sort of superscript) symbol, whilst the delete symbol is not.
I inspected the corresponding html element and noticed that the smaller symbol was due to the ui-keyboard-actionkey scss class.
Since I want both to be the same size, the only solution I came up with, was to comment out the implementation of that class:
/* make action keys extra-wide */ .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) { // min-width: 6em; } .ui-keyboard-space { width: 15em; } .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span { // font-size: 0.8em; // position: relative; // top: -1em; // left: -1.6em; }
Resulting in:
Which is almost ok, but I prefer how the other 2 buttons 'cancel' and 'accept' were formatted before.
So, is it possible to decide which characters should be assigned the 'ui-keyboard-actionkey' class and which not?
Extra problem: the backspace and delete symbols are not symmetrical. Is there a way to solve that?
I'm using a custom layout:
keyboard.layouts['numeric'] = { "name" : "numeric", "lang" : ["en"], "normal" : [ "7 8 9", "4 5 6", "1 2 3", "0 . ,", "{cancel} {accept} {bksp} {del}", ], "shift" : [], "alt" : [], };and reasigning some symbols:
keyboard.language.en = { language: 'English ', display : { bksp: '\u232b:Bksp', del: '\u2326:Delete', } }In addition to that I'm using keyboard-basic.css.
The main problem is that the backspace symbol is being automatically formatted as a smaller (sort of superscript) symbol, whilst the delete symbol is not.
I inspected the corresponding html element and noticed that the smaller symbol was due to the ui-keyboard-actionkey scss class.
Since I want both to be the same size, the only solution I came up with, was to comment out the implementation of that class:
/* make action keys extra-wide */ .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) { // min-width: 6em; } .ui-keyboard-space { width: 15em; } .ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span { // font-size: 0.8em; // position: relative; // top: -1em; // left: -1.6em; }Resulting in:
Which is almost ok, but I prefer how the other 2 buttons 'cancel' and 'accept' were formatted before.
So, is it possible to decide which characters should be assigned the 'ui-keyboard-actionkey' class and which not?
Extra problem: the backspace and delete symbols are not symmetrical. Is there a way to solve that?