Ionic modal with sticky sub header?

ionic-v1
1

How exactly do I add a sticky bar for the modal?

This is how I understand how to add a sticky header in the modal:

<ion-modal-view class="" ng-controller="SomeController">
    <ion-header-bar class="bar-positive bar-subheader">
      <h1 class="title">View's Title</h1>
      <h5>Sticky text here</h5>
   </ion-header-bar>
<ion-content has-subheader="true" >

The visual result is shown below:

image

The red box is the top of the <ion-header-bar> which is just a space caused because adding class bar-subheader adds top: 44px

Another problem, the <h1>View's Title</h1> is pushed all the way to the right. It’s ciricled purple in the picture.

But the header is definitely sticky where I would scroll the content (surrounded by blue lines) and the header won’t scroll along.

2

I’m confused. Why are you giving it the bar-subheader class? And where is “Some text here” coming from on the header? Could you put this in a codepen or maybe give me a picture of your end goal. :smile:

Here’s a codepen of a modal with a header if you want to modify it to show the issue: http://codepen.io/brandyshea/pen/xwrLyZ?editors=101

3

@brandyshea

Oh. I see why it wouldn’t make sense. I apologize.

So I want to get this look:
image

The modal has a title and it also has text. And this text below it (in yellow letters). This text can be a paragraph or just a few words. Therefore, it is dynamic. (Sometimes it can have less words (maybe 5 words) as opposed to the number of words in the picture above.)

The problem that I’m having is that, the text below the modal title (in yellow letters) just add on to the height but it covers the top part of the <ion-list> content. So I can scroll the <ion-list> where the text (in yellow letters) don’t scroll along with it. But the content (in yellow letters) is covering the top part of the <ion-list> . Does this makes sense?

4

Okay I understand now. :slight_smile: Thanks for clarifying! So since it is dynamic you’re going to need to adjust the top property of the content based on the height of the subheader. I threw together a directive that does this: http://codepen.io/brandyshea/pen/PPjymy

You may need to tweak this for your use case, but this is one way to do it.

5

@brandyshea

In your CodePen (and thanks for it by the way), why are you using a fixed height instead of auto? 1. I don’t understand why auto doesn’t work in Ionic when it comes to the bar-subheaders and 2. Because auto doesn’t seem to work, the h1 text goes outside of the container (bar-subheader) instead of it being inside and therefore doesn’t dictate the height of bar-subheader

If I resize the width of the screen in your CodePen and the width is small enough, the h1 looks like this:
image

I’ve tried using word-wrap: break-word on to the bar-subheader which doesn’t really do anything. The width of the bar-subheader is already fluid so I couldn’t do much there. When I changed the bar-subheader h1's overflow property from visible to auto, the bar-subheader's height doesn’t change and it shows a scrollbar.

6

Okay, I figured it out.

All I had to do was use @brandyshea’s directive customSubheader and add even listeners to know if the window’s size changed and/or if the orientation changed. So I changed the anonymous function from the scope.$watch to a normal function declaration (with a name) and used it for the scope to watch. Then I used the same function for the window’s resize and orientationchange listener.

Below is my CodePen to share.
http://codepen.io/junerockwell/pen/ojeRXL

Thanks for giving me a headstart @brandyshea

1 Like
7

Glad you found a solution! The height: auto doesn’t work on the .bar because it is absolutely positioned. I was just giving it that css for the .title, and then a fixed height for the bar to match the inner title’s height. Thanks for sharing your Codepen. :smile: