Set ion-button height with percentage + keyboard show

Ionic Framework ionic-v3
1

My problem is I have a screen login, with inputs and login button vertically alligned. The heights are configured with percentage and shows fine but when I click on a input the keyboard shows, all elements that are configured with percentages reduces their height.

Is there any way to set the height of a element, i.e ion-button with percentage and then maintain this size when the keyboard is present

Thanks

2

I can not believe that nobody has solved this problem :sweat:

3

In fact, I had the same problem, I tried via config nothing worked, and I had no time to waste so I just “brute force” by forcing the size like a pig

4

Same ‘workaround’ :triumph:

The problem is when this ‘pigged sizes’ are shown on a small screens, in the case of a login page it causes scroll content…:roll_eyes:

I have already tried with some combinations of:

{
scrollAssist: false,
scrollPadding: false,
autoFocusAssist: false,
}

With no lucky :persevere:

5

it causes scroll content

Is it ?
disclamer : you can be blind after seeing this
What I did to fix it, Im not proud of it but, you know… If it works…

this.sizeElement = this.platform.height()/100*7;

[style.height.px]="sizeElement"

and just added an override on the event when screen rotate…

6

If someone has the real fix, I would like to see it, I have tried a whole bunch of config fix and others stuffs but really nothing has worked for me. It still torments me when I see this code.

7

How apply this to the original size of the element?, for example if the a button has 48px of height…

8

If they have a size defined they are not moving when the keyboard is showing, are they ?

9

If the elements have the size defined with px they not resizing when keyboard is showing

10

So you want to change the size of elements when the keyboard is here ? I thought you wanted the page staying the same

11

Oh sorry then, you apply this:

this.sizeElement = this.platform.height()/100*7;

[style.height.px]="sizeElement"

when the keyboard is showing, no?

But, over what?

12

I apply it in the construct,
this.platform.height()/100*7 = 7% of the size screen