Content within ionic-content tags not displaying properly

Content placed within the ion-content tag is not displaying where it should, it is instead rendered behind the header bar.

Do you mind explaining more in detail what you mean? Could you post some sample code or put a codepen together?

I’m trying the most simple example:

<ion-content>Hello World!</ion-content>

Then when I view the html source for the rendered page, “Hello World!” appears in the source but is not visible on the page. When I remove the header bar, then “Hello World!” is visible.

Here is the actual code:

  <body ng-app="myapp" ng-controller="myapp">
  <div class="bar bar-header bar-dark">
  	My Header
  <ion-content scroll="false" has-header="true" padded="true">
  	Hello World!
  <div class="bar bar-footer bar-dark">
  	My Footer

Awesome, thanks for sharing the code. If you switch to using the header and footer directives, the ion-content directive will automatically adjust to compensate for headers, footers, or even sub headers!

Just make sure you use the actual directive or the ion-content won’t adust

just so i am clear on this, this means that when using ion-content you do not need to specify has-header or padded ?

Thank you for sharing the code example. When I switch to using ion-header-bar and ion-footer-bar it now renders properly. Those tags are not in the documentation.

Do you have any ideas about why getting json with $http.get isn’t working? (see $http.get not working

Eh half-correct. As long as you are using the header, footer, subheader directives, you do not need to specify has-header or has-footer. Padding on the other hand is a manual class, and more of a utility class that can work for any element.

So you could have a layout like this

<ion-content class="padding">
    <div class="padding">I'm Extra Padded for Protection!</div>

And the div will get the same padding amount as the content would.

I spoke too soon. ion-footer-bar does not work at all, no footer renders when using it. Never mind, bug in my code!!

How are you writing you footer? Is it like this?

<ion-footer-bar class="bar-royal">
      <h1 class="title">Footer</h1>

I had a typo in the tag, it works fine.

Awesome, glad to here! I’ll take a look at your http.get issue right now

Thank you, I really appreciate it.


add this one when we scroll hapens contents are hiding not showing properly

<ion-subfooter-bar class="bar-royal bar bar-subfooter">
      <h1 class="title">Footer</h1>

here add this one and check content are not showing properly