[ Solved ] Difference between ion and divs / Difficulties to build a (simple) structure

ionic-v1
1

Hi there,

I’m junior on ionic.
I have some difficulties to understand differences between < ion > and casual divs in the template.
In order to build a good design, do I have to put a simple header like :

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

My content :

<ion-content
   <p>Something in</p>
</ion-content>

My footer :

<div class="bar bar-footer">
	<a class="tab-item" href="#">Conditions d'utilisation</a>
</div>

Here is my actual index where < ion-nav-view > implements my /home with the code below :wink:

<body ng-app="MyApp" animation="slide-left-right-ios7">

	    <!-- Balise des vues templates -->
	    <ion-nav-view animation="slide-left-right">
	    </ion-nav-view>
        
        <!--<script type="text/javascript" src="cordova.js"></script>-->
        <!--<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>-->
    	<script typoe="text/javascript" src="bower_components/ionic/release/js/ionic.bundle.min.js" ></script>
    	<!-- Appel du script -->
	    <script src="js/app.js"></script>
	    <script src="js/controllers.js"></script>
    </body>

Am I right ?
(wonderful framework btw)

2

Almost, you would want this.

ion-header class="bar-positive"
ion-content
ion-footer class="bar-positive

The ion- prefix markup are angular directives that extend the functionality. For the case of headers, footers, content directives, your ion-content will update it’s height if it seems header or footer

3

I thought my content would appear in a ion-nav-view :

<ion-nav-view animation="slide-left-right">
     <!-- relation to my home.html in my controller.js and app.js -->
</ion-nav-view>

When i replace my ion-nav-view by an ion-content, the content of my app disappear.
I usuallay fallback on my home page by this code in my app.js

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');

Here is my home controller

// Home Ctrl
.state('home', {
  url: '/home',
  templateUrl: 'templates/home.html',
  controller: 'HomeViewCtrl'
})
4

Okay I think I get it.
In my index I’ve got

<body ng-app="MyApp" animation="slide-left-right-ios7">
  <ion-nav-bar class="bar-dark nav-title-slide-ios7">
  </ion-nav-bar>

  <ion-nav-view animation="slide-left-right">
  </ion-nav-view>
</body>

My ion-nav-view is calling my page home.html who contains this

<ion-view title="Home" class="home_pane">
  <ion-content ng-controller="HomeViewCtrl" scroll="false">
    <p>Hi body !</p>
  </ion-content>
</ion-view>

And My app.js have

// Home Ctrl
.state('home', {
  url: '/home',
  templateUrl: 'templates/home.html',
  controller: 'HomeViewCtrl'
})

with

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');

Does it better ?

1 Like
5

Yup thats good :smile:

One thing, if you have your animation declared on the ion-nav-view, no need to declare it again on the body.

6

Awesomeness and magical :smiley:

But I’m facing at a new problem : my header isn’t well fitted

Explanation

My content get run over by the header. It’s a pain because I followed instructions but nothing appear in my header and he doesn’t push down my content.

Here my exact code

<ion-header-bar align-title="left" class="bar-positive">
	<div class="buttons">
	<button class="button" ng-click="doSomething()">Left Button</button>
	</div>
	<h1 class="title">beuleu !</h1>
	<div class="buttons">
	<button class="button">Right Button</button>
	</div> 
</ion-header-bar>

Have you got any ideas to fix this ? :blush:

7

Hmm odd, this shouldn’t be the case if your using ion-header-bar, ion-content, ion-footer.

Do you mind putting together a codepen?

8

Sure, I will try it !

With a colleague, we were looking after my navbar issue, it seems that it come from a bad link in my < link > and one of my < script >.
He replaced the link

<link href="bower_components/ionic/release/css/ionic.min.css" rel="stylesheet">

by

<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">

and

<script typoe="text/javascript" src="bower_components/ionic/release/js/ionic.bundle.min.js"></script>

by

<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>

We added a .has-header class to the content and seems to work.
I’ll keep you in touch and try to make a codepen.

9

I have some difficulties routing my app on codepen ^^
http://codepen.io/ugarz/pen/DkEBC

10

Problem solved !

There it is :smile:

To do this :

  • I replaced all I had in my index to a simple ion-header + ion-nav-view (calling my contents) just like you said, but I prefered to put cdn’s adresses instead of local files.
  • In order to have a full nav, I’ve switched my ion-header to an ion-nav adding a hide-nav-bar=“true” in my home.html to hide the navbar on the splashscreen.

Thank you for your time and your help @mhartington !

Magic :smiley:

11

Ha, not sure how much help I was, seems like you got this one all by your self :thumbsup:

Glad to hear all is good.