Custom subheader over ion-content

ionic-v1
1

Hi! I have this subheader in a template:

<ion-header-bar class="bar bar-subheader" style="{height: auto;}>
    <div class="row">
      <div class="col col-25">
        <img src="img/something.jpg" style="{width: inherit;}"></img>
      </div>
      <div class="col">
        <h3>Name</h3>
        <h4>Detail</h4>
      </div>
    </div>
    <button class="button button-block button-positive">
      Do Something
    </button>
</ion-header-bar>

The subheader shows an image, some data and a button. Of course it gets higher than the normal subheader (using height: auto).

The problem is that I can’t get the ion-content under that ‘thicker’ subheader. I’ve tried

<ion-content has-header="true" has-subheader="true" has-tabs="true">

and things similar, but no luck.

What is the best way to style subheaders higher, letting the ion-content below it? Thanks in advance!

1 Like
2

If you put your subheader outside of your content, it should remain sticky. Is that not what’s happening?

3

I want the subheader to be sticky and want the content to be under the subheader (naturally). I don’t know if I’m being clear. Thanks for the quick reply!

4

If the subheaders height isn’t a set value, it will overlap the content. The class has-subheader just adjusts the top position value of ion-content.

1 Like
5

Thanks! Following that codepen, I managed to do what I wanted by putting the following in my styles.css:

.bar-subheader{
  height: 162px !important;
}
.has-subheader{
  top: 206px !important;
}
6

but is it correct to override their values?
does this mean in every device, i would have to set different values for them?

7

I am wondering this as well. How can I manage this so it accommodates for different devices.

8

and how to account for a variable header size?

9

Post 1.0 we want to move everything to flex-box to make this possible.
You could start working on something going in that direction.

2 Likes
10

Here’s the equivalent in SCSS that is a bit easier to work with. Note, $bar-height is an Ionic Framework variable in _variables.scss:

$newHeight:162px;
.bar-subheader {
	height: $newHeight !important;
}

.has-subheader {
	top: $bar-height + $newHeight !important;
}