How to add an image banner right below the navigation bar?


#1

Hi everyone,

I am creating my first app build on Ionic but I have some trouble when I want to include the image header right above the navigation bar. This is my screen

And my code here. First I add some code about navigation and this div contain image on > index.html

<body ng-app="hearingApp">
    <ion-nav-bar class="bar bar-header nav-title-slide-ios7 mhearing-bar" align-title="center">
    </ion-nav-bar>
    <div class="row header-banner">
        <div class="col-33">
            <img class="logo-left img-responsive" src="img/logo-left.png" />
        </div>
        <div class="col-67">
            <img class="logo-right img-responsive" src="img/logo-right.png" />
        </div>
    </div>
    <div class="clearfix"></div>
    <ion-nav-view></ion-nav-view>
</body>

And in my app.js I config some route.

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('hearings', {
        url: '/hearings',
        controller: 'HearingsController',
        templateUrl: "templates/hearings.html",
    })

    .state('hearing', {
        url: '/hearings/:hearingGUID',
        controller: 'HearingController',
        templateUrl: "templates/hearing.html"
    })
    $urlRouterProvider.otherwise("/hearings");
})

But I found some problem, the first one is when loaded pages, my “hearings” route page seem not realize the navigation bar, because i found on ion-content has auto generate “has header” class with 44px white as you see on below image
And the second one is I can’t scroll to the end of the

Have anyone face with this problem before? Thanks for your help :smiley:


#2

I would recommend using a subheader. When you add a subheader it will add the class has-subheader to the content. If you want the subheader to be taller than 44px you will have to override the height of the bar-subheader and the top of the has-subheader. This means you will need to have a specified height. See this codepen for example: http://codepen.io/anon/pen/JoJxEL

If you don’t want it to be absolutely positioned over the content, that’s a different story.


#3

Thanks for your answer, I am taking a try for this solution. But in the other hand, If I want to set height for this header image dynamically, so do you have any suggestion :smiley:


#4

I’m not an AngularJS expert :stuck_out_tongue: but this should get you started: http://codepen.io/anon/pen/OPjyVX

I added a directive customSubheader to change the property top of has-subheader. I set bar-subheader height to auto in the CSS. I’m sure it can be cleaned up. Hope that helps.


#5

Thanks for your help but when I select to another screen by routing, It’s not working til I refresh on browser, so I find another way to deal with this :smiley: Only fix height for header banner is good choice.

Anw, thanks you so much


#6

Thank You @brandyshea. that’s really helpful for me. I was stucking with ionic-content-banner !!
but problem is solved with sub-header. !! Thank again. :slight_smile: :slight_smile: