Ion-content: fullscreen with no marginTop/paddingTo

Ionic Framework ionic-v3
1

Hey guys,

I am trying to set no top margin on the ion-content element.

The goal is to create a transparent header bar that will be opaque after scrolling:

image
Screen Shot 2016-08-21 at 5.25.58 PM.png940×744 485 KB

the ion-content computes automatically the margin-top and/or the padding-top property.

image

With ionic 1, this could be simply achieved with: contentElem.style.top = 0;

With ionic 2, the ion-content overrides any provided value (via javascript or css):

this.ionContentElement.style.setProperty('margin-top', '0px', 'important'); //WON'T WORK

The fullscreen property could work but the initial margin is still the size of the header bar. I believe the fullscreen property with an extra value to set no margin is the correct solution. Especially, because of the Content.resize() function that rewrites these values.

Any thoughts on that would be appreciated.

Thank you.

EDIT: apparently, I am not the only one struggling with a transparent header bar, see How can I make a transparent toolbar?.

2

hi @mhartington,

Can you please take a look at this one and let me know your thoughts?

Thank you.

3

Hey there,

have you tried it like this?

.your-page ion-content scroll-content {
  margin-top:0px !important;
}
.your-page ion-navbar .toolbar-background {
  background: transparent;
}

The class “.your-page” is the class of the page, where you would like to have this feature turned on.

Oliver

4

I would like a way to do it via JS instead of CSS as I am going to ship this as a plugin.

5

Hmmm,

I tried something different and it works, but you do have to specify the css classes also before…

CSS:

.transparent {
  background: transparent !important;
}
.no-margin-top {
  margin-top:0px !important;
}

Javascript:

var bar = document.getElementsByClassName("toolbar-background")[0];
bar.classList.add("transparent");
var content = document.getElementsByTagName("scroll-content")[1];
content.classList.add("no-margin-top");

Is this good enough for your application?

Gotta specify the number [0,1,…] of the element within your DOM.

Oliver

1 Like
6

I found the following css style worked for me :

.scroll-content {
  padding-top: 0px !important;
}

Along with <ion-navbar transparent> and <ion-content fullscreen="true">