I'm currently experiencing an issue with the placement of the keyboard while using the Mottie/Keyboard plugin. The images provided below illustrate my desired outcome and the current behavior:
https://i.sstatic.net/GULve.png
Despite my attempts, the keyboard consistently appears at the top-left corner of the screen.
This problem persists whether I use a modal or not, affecting all inputs universally.
In this scenario, I wish for the keyboard to appear beneath the modal.
$('#quantity-input').keyboard(
{
layout : 'num',
usePreview: false,
restrictInput: false,
preventPaste: true,
autoAccept: true,
position : {
// optional - null (attach to input/textarea) or a jQuery object
// (attach elsewhere)
of : $('.modal'),
my : 'center bottom',
at : 'center bottom',
// used when "usePreview" is false
// (centers keyboard at bottom of the input/textarea)
at2: 'center bottom'
},
});
I have attempted adjusting the position property of, targeting different elements including:
$(window)
$(this)
$('#quantity-input')
$('body')
Unfortunately, none of these alternatives have resolved the issue. Here are the CSS and JS files being utilized:
bootstrap.min.css
bootstrap.min.js
keyboard.min.css
jquery-wijmo.css
bootstrap.min.js
keyboard.min.js
EDIT: You can see the problem on JSFiddle.