Dynamically change keyboard position on keyset change

[Gingol]

Hi,
I would like to dynamically change the position of the keyboard when the keyset is changed.
I have this custom layout with three keyset:

layout: 'custom',
customLayout: {
	'meta_num': [
		'* / + -',
		'7 8 9 {b}',
		'4 5 6 .',
		'1 2 3 ,',
		'{meta_shift} 0 {normal} {e}'
	],
	'normal': [
		'q w e r t y u i o p {b}',
		'a s d f g h j k l {e}',
		'z x c v b n m , .',
		'{meta_shift} {space} {meta_num}'
	],
	'meta_shift': [
		'Q W E R T Y U I O P {b}',
		'A S D F G H J K L {e}',
		'Z X C V B N M ; :',
		'{normal} {space} {meta_num}'
	]
},

And this position settings:

reposition : true,
	position : {
		of : $("body"),
		my : 'center middle',
		at : 'center middle',
		at2: 'center bottom' // used when "usePreview" is false
},

The meta_num keyset is tighter than the other ones, so when the keyset changes the keyboard isn't centered but it's on the left (because the attributes "top" and "left" remain the same).
I would like an always-centered keyboards or alternatively the meta_num keyboard aligned on the right.
I already tried the redraw function but it didn't work.
I hope someone can help me.
Thanks in advance.

Mauro

[Mottie]

Hi @Gingol!

The redraw method will work, but was intended for a layout change. In issue #532 I shared a demo with custom keys that changed both the layout and language of the keyboard. I updated the demo to include a numpad with the custom keys included - demo.

In your case, only the keyset is being changed and the keyboard isn't being repositioned. This is definitely a bug which I'll fix in the next patch. In the mean time you can use this workaround to center the keyboard after a keyset change (demo):

$('#keyboard').on('keysetChange', function() {
  $(window).resize();
});

[Gingol]

Hi @Mottie,
I came to the same solution by reading exactly that issue.
Thanks anyway for your answer.

[Mottie]

The fix will be available in the next update, but is currently available in the master branch.

I also added a new reposition method will allows you to call the function instead of triggering a window resize.