Hadi Amiri Hadi Amiri - 3 months ago 19
Javascript Question

Mottie virtual keyboard with bootstrap theme

I am using Mottie virtual keyboard with this angular wrapper around it, I want to use a bootstrap theme for my keyboard and I added it like this

VKI_CONFIG.css = {
// input & preview
input: 'form-control input-sm',
// keyboard container
container: 'center-block dropdown-menu', // jumbotron
// default state
buttonDefault: 'btn btn-default',
// hovered button
buttonHover: 'btn-primary',
// Action keys (e.g. Accept, Cancel, Tab, etc);
// this replaces "actionClass" option
buttonAction: 'active',
// used when disabling the decimal button {dec}
// when a decimal exists in the input area
buttonDisabled: 'disabled'
};


Here you can find a live example of it, As I browsed demos and online examples of usage of this keyboard like here and here, In all of them keyboard gets resized when browser windows is resized, but I don't have that behavior at all, Am I missing something here? how can I make my keyboard to get resized when I resize my browser window (with bootstrap theme)?

Or in other words how can I make this keyboard to get resized on window resize?

Answer

The keyboard doesn't have a css file specifically set up for Bootstrap, so the following media queries are needed to resize the keyboard (also see the FAQ).

I don't know how accurate these settings are, but please feel free to adjust the font-size - demo

/* Media Queries */
/* 240 x 320 (small phone)  */
@media all and (max-width: 319px) {
    .ui-keyboard .ui-keyboard-button { font-size: 9px; }
    .ui-keyboard .ui-keyboard-input { font-size: 12px; }
}

/* 320 x 480 (iPhone)  */
@media all and (min-width: 320px) and (max-width: 479px) {
    .ui-keyboard .ui-keyboard-button { font-size: 9px; }
    .ui-keyboard .ui-keyboard-input { font-size: 14px; }
}

/* 480 x 640 (small tablet) */
@media all and (min-width: 480px) and (max-width: 767px) {
    .ui-keyboard .ui-keyboard-button { font-size: 13px; }
    .ui-keyboard .ui-keyboard-input { font-size: 14px; }
}