Ion-content

ionic-v1
1

I have markup like this.

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="css/ionic.css" rel="stylesheet" />
</head>

<body>
    <div class="bar bar-header bar-light">
        <h1 class="title">Header</h1>
    </div>

    <ion-content>
        <h1>Header</h1>
    </ion-content>

    <div class="bar bar-footer">
        <div class="title">Title</div>
    </div>

</body>
Observed: ioc-content is hidden under bar-header. What i'm doing wrong?
2

add the class has-header to <ion-content>

4

doesn’t work with has-header class

5

Try this

<ion-header-bar class="bar-light">
        <h1 class="title">Header</h1>
</ion-header-bar>

<ion-content>
    <h1>Content</h1>
</ion-contetn>


<ion-footer-bar class="bar-light">
        <h1 class="title">Header</h1>
</ion-footer-bar>

This was, ion-content will auto-adjust if there is a header or footer in the view.

6

@mhartington

this is the result…
I’m following official docs… and it doesn’t work…

7

Is ionic loading correctly?

Take a look at this demo.

8

@mhartington all loaded great… but got this error in bundle…

9

What system is this? Appgyver?

10

@mhartington appbuilder

11

Can you paste the content of your index.html ?

12

@mhartington sure. Here it is: http://pastebin.com/Xui5D9tG

13

It looks like your not initializing angular, add this script

angular.module('ionicApp', ['ionic'])

Then the html or body tag, add this

ng-app="ionicApp"
14

@mhartington yep! Thats works!
I thought that is css responsibility…

15

Nope, the real magic is in the javascript, which uses angular.

16

@mhartington Thanks! Sorry for interruption…

17

No worries :smile:

It’s what I’m here for