CODEWITHSUNDEEP
htmlcssionic-framework
raberana
raberana

Reputation: 11816

Ionic customized sub-header covering the ion-content

I edited the sub-header style so that instead of having a fixed height, its height is now in auto. I did this so that it can accommodate all the elements inside it.

However, upon doing this, the content is behind my larger sub-header.

In this topic, I think what was done is to override the has-subheader and bar-subheader classes. Is this ok? Will there be an issue if the app is shown in multiple devices?

Here is a sample code:

<ion-view>
   <ion-header-bar class="bar-subheader" style="height: auto">
   <div>
       123
   </div>
   <div>
       456
   </div>
   <div class="button-bar">
       <a class="button">A</a>
       <a class="button">B</a>
       <a class="button">C</a>
   </div>
   </ion-header-bar>

   <ion-content class="has-header has-subheader padding">
      <div style="font-size: 100px">HI !</div>
   </ion-content>
</ion-view>

Here's what it looks like:

enter image description here

Upvotes: 2

Views: 6747

Answers (1)

Captain Quirk
Captain Quirk

Reputation: 376

You can also add a padding-top to your ion-content on that page. It will push down all you content inside that tag.

<ion-view>
   <ion-header-bar class="bar-subheader" style="height: auto">
   <div>
       123
   </div>
   <div>
    456
   </div>
   <div class="button-bar">
    <a class="button">A</a>
    <a class="button">B</a>
    <a class="button">C</a>
   </div>
   </ion-header-bar>

   <ion-content class="has-header has-subheader padding morePadding">
    <div style="font-size: 100px">HI !</div>
   </ion-content>
</ion-view>

<style>
.morePadding {
  padding-top: *asmuchpaddingasyouneedhere*
 }
</style>

Upvotes: 3

Related Questions