Ion-Popover adding extra blank space at bottom

Ionic Framework Ionic Angular
1

Hi guys!
In my app, i’m using some popovers for confirmation stuff, but i’m having a strange problem where when draging the popover up a strange extra space show up at the bottom. And when the ion content is empty it does not happen. It seems like this extra space is added in some way because of the ion-content internal content, but inside it there is sufficient space.

My popover class is like this:

export class SubmitPopup implements OnInit {

  public itemNumber: number;

  constructor(
    private popover: PopoverController,
  ) { }

  public ngOnInit() { }

  public close(submit=false) {
    this.popover.dismiss({
      submit,
    });
  }
}

When the popover is called from inside other class, the code is just like this:

const popover = await this.popover.create({
      component: SubmitOrderPopup,
      componentProps: {
        itemNumber: this.item.id,
      }
    });

    await popover.present();

    const { data } = await popover.onDidDismiss();

I already tried to use a custom class in global.scss, but it does not work as expected.

For the .html file i just used a ion-header and a ion-footer and the ion-content with its internal content.

The ionic version is 4
Thanks in advance!

2

Html structure that you described is suitable for pages. Ion-popover is to use with small parts of interface, like a list of few items or a small card. If you need a page like overlay, you can use a modal page.

3

Yeah, i was exactly that! After change some of the html structure removing the ion-header, ion-footer etc, and using just a basic structure based on divs there is no more blank space. Thanks friend!