Reduce {empty} button width to 0.5em

[RashmiSR]

Hi Mottie,

I downloaded new version of code from your website yesterday.
After that the width of {empty} button got increased in my UI page.
If i tried to reduce the width=2em, to 1em, changes are visisble in UI.
But when tried with 0.5em, changes are not visible.
How is it possible to reduce any button width to 0.5em?

MY code is

$('#keyboard').keyboard({

css:{ buttonDisabled:'ui-keyboard-empty'}

})

In css file

ui-keyboard-empty{height:2em; width:0.5em;opacity:0.0;filter:alpha(opacity=0);}

Thank you
Rashmi

[Mottie]

Hi @RashmiSR!

In the newest version you can use {sp:1.0em} again, or even {sp:0.5em} if you want (demo).

Actually. it looks like the ui.-keyboard-empty class name isn't even applied! =(

I'll fix this in the next update, but it looks like the class name ends up being ui-keyboard-

<button role="button" type="button" aria-disabled="true" tabindex="-1" class="ui-keyboard-button ui-keyboard- ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-disabled" data-value="" name="" data-pos="0,0" title="" data-action="" data-original="" data-curtxt="" data-curnum="0">
    <span></span>
</button>

in any case, I haven't touched the css in a while. Maybe this issue involves setting the css-boxsizing? Try adding this:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

or if you want to reduce the size of all buttons, check out the FAQ