3

So I've got an ionic page with a translucent ion-header and fullscreen ion-content.

The problem is that changes on the CSS are not applied when overriding the ion-content as mentioned on the official site and default styles are being applied on the ion-content after rendering

page.html

<ion-content [fullscreen]="true">    
  <ion-grid fixed id="mainGrid">
    <ion-row>
      <ion-col size="12">
        <h1>Hola</h1>
        <h3>Eu ex ipsum anim voluptate dolor.</h3>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

page.scss

ion-content {
    --offset-top: 0;
}

And here are the tags once rendered the app:

<ion-header _ngcontent-uhx-c139="" class="ion-no-border primary md header-md header-translucent header-collapse-none header-translucent-md hydrated" ng-reflect-translucent="true" role="banner">...</ion-header>
<ion-content _ngcontent-uhx-c135="" style="--offset-top:56px; --offset-bottom:56px;" ng-reflect-fullscreen="true" class="md hydrated">...</ion-content>
Mannix
  • 41
  • 6
  • Careful test in later version iPhones when messing with the offset https://forum.ionicframework.com/t/ion-toolbar-color-issue-on-iphone-12/200925 – MadMac Dec 18 '20 at 04:22
  • You need to use --offset-top: 0!important; The offset is actually negative so if you want it up under the translucent header then you want 56px. – MadMac Dec 18 '20 at 04:36

0 Answers0