Header component

Ionic Framework ionic-v3
1

Hi guys!

I’m having a problem regarding componentization of the ion-navbar, on Android it renders normally, but in ios it does not take into account the status bar … Below follows the codes and image of how it stays in ionic lab.

Note that the status bar in ios is above the header, not giving a space.

Screenshot from 2017-09-12 22-55-22
Screenshot from 2017-09-12 22-55-22.png741×217 26 KB

Header component

<ion-navbar>
  <ion-title>EventDream</ion-title>
  <ion-buttons end>
    <button ion-button icon-only (click)="showActionSheet()">
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

Using

<ion-header>
  <events-header></events-header>
</ion-header>

anybody???

2

Does it work properly when you put your header component template directly into your page?

I’m wondering if this is an instance of Ionic expecting certain elements to be direct children of other elements.

1 Like
3

But this header will be used in more than 1 page, I do not want to be replicating code

4

Of course. I just meant for testing purposes.

5

right, so when I use it without being inside the component, repeating the code, it works normally.

6

I think I tried that before and saved this in the back of my mind: You unfortunately can’t wrap ion-navbar in a component because the CSS path changes and some stuff doesn’t get applied.

7

I came to think of this possibility … What do you suggest I do?

8

Copy paste the code to all the places where you are currently using that component.

9

@Sujan12 That is a horrible solution. Rather, add a simple row of css and manually add the padding to your component. I don’t remember the appropriate class name right now, but just inspect the DOM and you’ll see.

10

@crkvend Feel free to create a tutorial that covers all edge cases and fully replaces the normal functionality and post it here somewhere, then I can link to it in the future instead of suggesting a solution that just works right now.

11

There is really no tutorial needed for this. Just try adding something like this to your global css:

.platform-ios ion-navbar ion-title {
  padding-top: 20px;
}

I have an ion-navbar with tons on functionality, placed on about 20 pages. Copying the navbar functionality to every single page that uses it would be a nightmare.

12

I already had this idea, I will try directly in the class you commented … Thanks for the help!

1 Like
13

this is markup I used

events-header {
  ion-navbar.toolbar.toolbar-ios.statusbar-padding {
    padding-top: 20px;

    div.toolbar-content.toolbar-content-ios {
      ion-title.title.title-ios {
        div.toolbar-title.toolbar-title-ios {
          padding-top: 20px;
        }
      }
    }
  }
}