0

I have an on-screen-keyboard. I want to place it on bottom of screen So that when we click a TextEdit, the keyboard appears in button of screen. The button of current frame is my purpose. I have the following code but it doesn't work.

.ui-keyboard {
    border-radius: 0;
    left: 0;
    position: absolute;
    bottom: 5%;
    width: 80%;
 }

enter image description here

Sohrab
  • 1,348
  • 4
  • 13
  • 33
  • We need more information about the HTML where this CSS applies and maybe also the CSS of the surrounding elements of the `.ui-keyboard` element. Use [jsfiddle.net](https://jsfiddle.net/) – jaumemk Sep 07 '17 at 07:45
  • your css is right . Can you share on button click code – user223321 Sep 07 '17 at 07:50
  • I program in Aurelia and the code is not a normal HTML code. It is not helpful to write here. If the code is correct, I have to find the other reasons. – Sohrab Sep 07 '17 at 07:55
  • Can you take the picture of what is happening with this code. Because maybe you need to change the `position` to `fixed`. – Maverick Sep 07 '17 at 08:12
  • @Maverick I did it. – Sohrab Sep 07 '17 at 08:20
  • @Sohrab From the picture I can't see if this is your whole viewport. But if it is it's look kinda ok.. To check color the `.ui-keyboard` for example red, and see where the borders are. Maybe the `.ui-keyboard` is at the bottom and the keys (buttons) are pushed from the bottom of it. – Maverick Sep 07 '17 at 08:24
  • @Maverick I checked it. just TextEditor is effected and changed the colour. I will change the above picture to see the result (yellow colour). – Sohrab Sep 07 '17 at 08:35
  • 1
    @Sohrab Hmm you see something is off.. Your whole `div` is collapsed. If buttons are floating you need to "clear" them. Search for a term "css clearfix" and add it to keyboard. – Maverick Sep 07 '17 at 08:39

1 Answers1

0

I solved it:

top: auto;
bottom: 16rem;
position: fixed;
Sohrab
  • 1,348
  • 4
  • 13
  • 33