Keyboard shown in left down corner

[mrjohnr]

Hi. I'm using the keyboard with Angular 4 + webpack and the keyboard is shown left down corner. https://imgur.com/VXfzPDC If I pres only one key then it autocolse:

const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'font-awesome/css/font-awesome.css',
    'zone.js',
    'virtual-keyboard'

];

called this way:

  (<any>$(this.el.nativeElement)).find('#passw')
                .keyboard({
                    layout: 'qwerty',
                    autoAccept: true,
                    enterNavigation: false,
                    css: {
                        input: 'form-control input-sm',
                        container: 'center-block dropdown-menu', 
                        buttonDefault: 'btn btn-default',
                        buttonHover: 'btn-primary',
                        buttonAction: 'active',
                        buttonDisabled: 'disabled'
                    },
                    change: function (e: any, keyboard: any, el: any) {

                        if (keyboard.last.key === "enter") {
                            keyboard.accept();
                            (<any>$("#okButton")).click();

                        }

                    }
                })
                .addTyping({
                    showTyping: true,
                    delay: 50
                });

thanks for any help

[Mottie]

Hi @mrjohnr!

As I mentioned before, I'm not much help when it comes to Angular, but by default keyboard positioning is done by jQuery UI's position utility (optional) which I can't tell if it's loaded.

You can also position the keyboard using CSS. Check out the basic light and dark demos and the first demo under the Layout section on the main wiki page.

[mrjohnr]

Hi.I've not loaded nothing from jQuery UI thanks

[mrjohnr]

including keyboard.min.css in _Layout.cshtml makes the keyboard working (in first post when I press a key it closes) .but the position is now in left top corner.Not able to center it with the code

 position: {
        of: $(window), 
        my: 'left top',
        at: 'left+200 top+50',
        at2: 'center center' 
    }

flowing this,I think the problem is including jQuery-ui ...I've tried to put in webpack.config.vendor.js

const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
    'jquery-ui'

];

but not working

[mrjohnr]

found also this but not helped me too much

https://www.npmjs.com/package/webpack-jquery-ui