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

Ionic Framework ionic-v3
1

Hello,

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.

Screenshot

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

2

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

3

Also Beta2.

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

<style>

#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;
}

</style>

<ion-navbar *navbar>
    <ion-title>Einloggen</ion-title>
</ion-navbar>

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

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

4

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:

5

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

6

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.

7

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

8

Hey,

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