How to set scroll-content padding top to zero on landscape mode?

Hi all,

I have a question regarding padding that’s automatically added to the scroll-content. this padding is added to prevent loading content underneath the ion-header on page load. I think it’s added with beta 10, because of the possibility to make a transparent header (it’s their for obvious reasons imo).

What i would like to do is to remove this padding add the top of the scroll-content (which is inside ion-content). Here’s what I want to achieve:

A fullscreen inline video on landscape. Since iOS forces videos to fullscreen mode on play and I want a custom overlay over the video, I made a video element that’s fullscreen on landscape mode but plays inline. This way I can add custom behaviour to the view, such as making areas of the video clickable. However, initially I just hid the ion-header on landscape mode, but now there’s this padding added to the top of the ion content, which makes the fullscreen video modus (which is obviously an inline, fullscreen made video) looks a little bit weird since it’s pushed downwards.

Anybody good suggestions about overcoming this (rather simple) issue? I came up with the idea to detect the screen orientation through the device-orientation plugin and just undo this padding at the top of the content, but it feels a bit overdone. Then I thought… Let’s just ask you guys. What do you think?

What I did recently

import {EventEmitter, Injectable, provide} from '@angular/core';

@Injectable()
export class OrientationChangeEvent extends EventEmitter<any> {
  constructor() {
    super();
    this.registerDeviceOrientationChangeEvents();
  }

  private registerDeviceOrientationChangeEvents() {
    window.addEventListener('orientationchange', () => {
      switch (window.orientation) {
        case -90:
        case 90:
          this.emit('landscape');
          break;
        default:
          this.emit('portrait');
          break;
      }
    });
  }

  public onLandscape(listener: Function) {
    this.subscribe((orientation) => {
      if (orientation === 'landscape') {
        listener && listener();
      }
    });
  }

  public onPortrait(listener: Function) {
    this.subscribe((orientation) => {
      if (orientation === 'portrait') {
        listener && listener();
      }
    });
  }
}

This service can be injected to you component where you can use as

class MyComponent {
  constructor(orientationChange: OrientationChangeEvent) {
    orientationChange.onLandscape(handler);
  }
}

in handler change element class.

1 Like

I think it’s a nice answer, especially because it’s wrapped in a service. I feel there’s a more simple solution for me (like adding some option to undo the auto-padding on the scroll-content), but I’ll go for this one right now. Thanks!