Understanding <ion-content>

ionic-v1
1

Hi,

I’ve been having a few problems with headers and footers, and I’ve discovered that my issue is with my use the ion-content tag.

The docs seem to say that ion-content is for scroll-able content, therefore footers (and headers too, I suppose) should be left outside the the tag. This isn’t always the case in many examples I’ve seen.

I guess what I’m asking is, is what I’m saying correct, and are there best-practices someone can point me to?

Thanks,
David

1 Like
2

-> The docs seem to say that ion-content is for scroll-able content, therefore footers (and headers too, I suppose) should be left outside the the tag.

Yes, that’s correct. If, for example you add a 'subheader:

  <ion-subheader-bar class="bar bar-subheader">
    ...
  </ion-subheader-bar>

Then you need to tell ‘ion-content’ about it:

  <ion-content class="has-header has-subheader">

If, for example you add a ‘subheader’ and a ‘footer’:

  <ion-footer-bar class="bar bar-footer bar-dark">
    ...
  </ion-footer-bar>

Then you need to tell ‘ion-content’ about it:

  <ion-content class="has-header has-subheader has-footer">

Some example templates: https://github.com/Robinyo/Vardyger/tree/master/core/client/app/templates

3

There may be use cases where someone wants a subheader or footer inside of the ion-content, but for the most part these components should be outside of the ion-content. You shouldn’t need to add any classes to ion-content, these classes are added automatically if the structure is set up correctly. Here is an example codepen with a subheader and footer on the first view, and no classes added to the ion-content: http://codepen.io/brandyshea/pen/aOYWOZ?editors=101

You can find more examples on Ionic’s codepen account: http://codepen.io/ionic/public-list/

I’m not sure that a list of best practices exists for using ion-content, other than the examples given above. The structure of a view should generally be:

<ion-view>
  <ion-header-bar></ion-header-bar>
  <ion-content></ion-content> 
  <ion-footer-bar></ion-footer-bar>
</ion-view>

– where the header & footer are optional components.

There is a list of resources available here which may help: http://mcgivery.com/100-ionic-framework-resources/

1 Like
4

@brandyshea
@davidnc44

-> You shouldn’t need to add any classes to ion-content, these classes are added automatically if the structure is set up correctly.

All except for the ‘ion-subheader-bar’:

  ...

  <ion-subheader-bar class="bar bar-subheader">
    <div class="title title-left padding-left">
      <small translate="ALL_POSTS">
      </small>
    </div>
    <button class="button icon-right ion-ios-compose button-clear button-balanced"></button>
  </ion-subheader-bar>

  <ion-content class="has-subheader">

  ...

I had to add the classes to the ‘ion-subheader-bar’ directive (class=“bar bar-subheader”) and to the ‘ion-content’ directive (class=“has-subheader”) so that my views could render correctly: https://github.com/Robinyo/Vardyger/tree/master/core/client/app/templates

Note: I am using v1.0.0 because of the ‘< Back’ button issue: https://github.com/driftyco/ionic/issues/4132

5

@brandyshea

Ahh, I just noticed you use ‘ion-header-bar’ and NOT ‘ion-subheader-bar’:

<ion-header-bar class="bar-subheader bar-positive">
    <h1 class="title">Subheader</h1>
</ion-header-bar>

Which is why your Codepen is working.

6

Raised a new issue: https://github.com/driftyco/ionic/issues/4165

@brandyshea Sorry, I had a custom directive floating around…

I did tag it as a “Type: feat” so it would be nice to just use (where possible) Ionic directives:

<ion-view>
  <ion-header-bar></ion-header-bar>             <!-- optional -->
  <ion-subheader-bar></ion-subheader-bar>       <!-- optional -->
  <ion-content></ion-content>
  <ion-subfooter-bar></ion-subfooter-bar>       <!-- optional --> 
  <ion-footer-bar></ion-footer-bar>             <!-- optional -->
</ion-view>

For example:

image