ngx-material-keyboard / core

Onscreen virtual keyboard for Angular ≥ 5 (https://angular.io/) using Angular Material (https://material.angular.io/).
https://ngx-material-keyboard.github.io/core/
98 stars 120 forks source link

Removing the animations and fixing the keyboard to the bottom #48

Closed SondreBlegen closed 6 years ago

SondreBlegen commented 6 years ago

Hi, Is there a way to remove the animations? I am also wondering if there is a way to fix the keyboard to the bottom centre of the page.

davidenke commented 6 years ago

To remove animations it should be possible to deactivate them as documented in the Material docs. The keyboard is always centered and on the bottom, or did I misunderstand you @ShrekTheHumper?

SondreBlegen commented 6 years ago

The keyboard appears under the content at the bottom of the page. Is there any way to "dock" it at the bottom of the page?

davidenke commented 6 years ago

Usually it is on top of the content at the bottom of the viewport. If not, your layout is a bit "special". The keyboard is attached using the cdk, so your layout may also break with all other Material components using it. Could you provide a plunkr showing your basic layout? Have you tried using the layout examples from the Material docs?

SondreBlegen commented 6 years ago

The thing is that i dont use material, i use bootstrap. I was unable to find any other working keyboards for angular, so i ended up with this one (Which i got working after a while). I just upgraded from 0.0.11 to 0.1.0 and have another issue now. Is this because i dont use the material containers etc?

image

davidenke commented 6 years ago

Sorry, without a Plunkr it's not reproducable.

davidenke commented 6 years ago

It'll be reopened if it is reproducible.

onlineuser1825 commented 5 years ago

Can we customize the keyboard position

FloLech commented 5 years ago

I had the same issue and solved it by adding the following to the cdk-overlay-container CSS class

.cdk-overlay-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); }