Ion-content


#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