Floating Label input adds style="padding-bottom" to scroll-content on md


inside my <ion-content> i have a display: flex; container.
Inside that container i use Floating Label inputs.

Now whenever i click on that input, it adds style="padding-bottom: 455.5px;" to the <scroll-content> tag thats inside my <ion-content>. That destroys my entire flex layout.

This problem only occurs on the md theme. On ios it workes just fine.
Also it only occurs in my browser when i call ionic serve -l. On my android device it works fine too.


Is it supposed to work like that or is this a bug?

Could you tell me what beta version? I’m not able to reproduce this with beta2

Also Beta2.

Here’s the shrunk down code to reproduce it with:


#wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;

#header {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;

#content {
  flex: 0 1 auto;


<ion-navbar *navbar>

<ion-content class="has-header">
    <div id="wrapper">
        <div id="header">
            <img src="https://placehold.it/256x128">
        <div id="content">
                    <ion-label floating>Input</ion-label>
                    <ion-input type="text"></ion-input>

I just tried it with a blank --v2 --ts template and it produces that error.

Here’s a little demonstration.

I guess it has something todo with the flex container. I checked all the code in the node_modules as good as i could and i couldn’t find the line where this occurs :confused:

Curious, why did you put those styles there?
That’s probably what’s causing the issue

Is there any other way to realise that layout?
I need the content to be at the bottom and the header to fill out the rest of the space. Like this.

Ok the problem is actually caused by something else. See this post.


Did you fixed the padding-bottom issue? I am experienced it as well.