Content within ionic-content tags not displaying properly

ionic-v1
1

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

2

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

3

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.

4

Here is the actual code:

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

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

6

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

7

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

8

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>
</ion-content

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

9

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

10

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

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

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

12

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

13

Thank you, I really appreciate it.

14

Footer

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

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

here add this one and check content are not showing properly