Button's layouts (non button positioning)

[tgely]

Hi Mottie,

congratulation your perfect project!. I love it :-)

I designed a special speedometer input keyboard with the customLayout but I cant find 'nonButton' spacer.

example:

        customLayout: {
          'default' : [
            '1 2 3 {bksp}',
            '4 5 6 {accept}',
            '7 8 9 {cancel}',
            '0'
          ]
        }

I like that '0' zero button is under '8' button for better design. Is it possible?

I tried css.

 .ui-keyboard-48 {
    width: 10.5em;
}

It would be good if I don't use more keyboard layouts, but i have other keyboards for alfanumeric inputs.

Something like this would be appreciated:

        customLayout: {
          'default' : [
            '1 2 3 {bksp}',
            '4 5 6 {accept}',
            '7 8 9 {cancel}',
            '0 {empty}'
          ]
        }

css:

.ui-keyboard-48 {
    width: 6.5em;
}

or without css

        customLayout: {
          'default' : [
            '1 2 3 {bksp}',
            '4 5 6 {accept}',
            '7 8 9 {cancel}',
            '{empty} 0 {empty} {empty}'
          ]
        }

Note: {empty} - non button

Regards,
tgely

[Mottie]

Hi tgely!

You can use {sp:1.1} which means spacer set at 1.1em. You can find a full list of default action keys under "customLayout" > Default special/"Action" keys include on the layouts page of the docs. I used 1.1 only to show that you can include decimals.

I set up a demo for you here using the smaller action buttons on the right side using this code.

        'default' : [
            '1 2 3 {b}',
            '4 5 6 {a}',
            '7 8 9 {c}',
            '{sp:1} 0 {sp:2}'
          ]

If you like the wider buttons, then you'll need to change the {sp:2} into {sp:3} to keep the alignment.

I'm glad you're finding the keyboard useful! :)

[tgely]

Hi Mottie!

Thanks advices.

Website details mistakes

User Agent: Mozilla/4.0 (compatible; MSIE 8.0, Windows NT 5.1; Trident/4.0;. NET CLR 1.1.4322;. NET CLR 2.0.50727;. NET CLR 3.0.4506.2152,. NET CLR 3.5.30729)
Time Stamp: Sun, 5 Feb 2012 06:42:46 UTC

Message: You can not control the focus, because it is not visible, unavailable, or because the type does not accept the focus.
Line: 3227
Characters: 6
Code: 0
URI: http://code.jquery.com/jquery-git.js

and Firefox not shown differencies {sp:x} dosen't work.

It looks like {sp:x} not takes effects only for center buttons.

Regards,
tgely

[Mottie]

Are you using the latest version of the keyboard plugin?

There was an issue with setting focus on hidden elements, but that was resolved, or should have been in the latest version.

The {sp:x} problem is very odd... I know it used to work and it works in all other browsers except for Firefox now. If I add this, it works, but then the key is one pixel off:

span.ui-keyboard-spacer { display: inline-block; width: 1px; height: 1px; }

I'll look into finding a fix that keeps it aligned properly.

[Mottie]

Ok, I've fixed the issue in version 1.9.9. The spacer is now set to the width instead of adding a left and right margin.

I've made some other changes to the spacer which you can read about here

[tgely]

Thanks a lot!

I give two hungarian keyboard standards to the project.

Regards,
tgely

[Mottie]

Hi Tgely!

I'd love to add some hungarian layouts to the project! You can just mail them to my gmail account; user name is wowmotty.

Thanks!