Weird padding showing up on scroll-content

Ionic Framework ionic-v3
1

Hi!

I’m new to Ionic in general so I thought I would just skip v1 and start learning with v2 since it’s already in beta, and with that said, I don’t know if I’m doing something wrong in my layout or if this is some kind of bug.

I started with a simple login page:

image

This is the code for the page:

<ion-content scroll="false" class="login">
        <ion-row center>
            <ion-col width-50>
            <h1 text-center>Login to account</h1>
            <ion-list>
                <ion-item>
                    <ion-label stacked>Username</ion-label>
                    <ion-input type="text"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label stacked>Password</ion-label>
                    <ion-input type="password"></ion-input>
                </ion-item>
            </ion-list>
        </ion-col>
    </ion-row>
</ion-content>

I vertical aligned the content by adding justify-content: center; and height:100% to ion-row. So, when I load the page as it is, it looks just like in the screenshot, and I don’t have any scroll at all. But when I click on any of the inputs to start typing (I tried it with different inputs and labels), the scroll-content tag gets a 450px padding-bottom out of nowhere, pushing everything up and giving me a huge scroll.

image
Screen Shot 2016-04-02 at 10.14.25 AM.png840×783 71.3 KB

As you can see in the code, I even use a scroll:false on the ion-content component which I read is supposed to cancel any scroll on the content. And by the way, this also happens if I remove the height: 100% on ion-row, so it’s not my custom css.

Sorry for the lenghty first post but I would really appretiate if someone could tell me If I’m not doing something right or if this appears to be a bug.

Thanks!

2 Likes
2

I guess that the padding is added to push the content up (because of the keyboard that is appearing from the bottom on mobile devices), for more details check this topic:

1 Like
3

It’s happening to me too… And yes it’s the padding added to push the content up but the padding isn’t removed after hiding keyboard.

4

I’m facing the same problem, did you fix it?

5

can we minimize the padding bottom? because page scrolls too much when keyboard is on.
and Also is it possible to just push the page up and not allow to scroll the page manually when keyboard is on?

1 Like
6

Slightly old post, but I stumbled upon this on Google and others might as well. Here’s what I use: Use what @chiragebiztrait provided instead!

ion-content.content-md[padding] .scroll-content {
	padding-bottom: 16px !important;
}

ion-content.content-md:not([padding]) .scroll-content {
	padding-bottom: 0 !important;
}
8 Likes
7

Hello @wolfius,

i have solved this problem by setting scrollPadding: false in app module config.

my current config

 IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,
      scrollAssist: false,
      autoFocusAssist: false,
      // scrollPadding:true
    })
9 Likes
8

thank you :slight_smile: you save me :smiley:

9

Amazing ! Thxx.
This solved my display issue

10

Thank you very much for the contribution.