How to give space between Header and content and footer?


#1

i am applying has-header and has-footer and padding in ion-content but it still not giving space.

Should i use Grid or call my on custom css to giving space?
I need help on this…


#2

Is it what you’re talking about ? http://ionicframework.com/docs/components/#grid-even


#3

I use this grid but its not giving space between header and content.
Is it must that we should use grid when creating an app?


#4

Its not giving space between header and content.


#5

Whats your markup look like? Can you put together a codepen for this?

It should be

<ion-header-bar></ion-header-bar>
<ion-content></ion-content>
<ion-footer-bar></ion-footer-bar>

#6

#7

Will you plz help me out.


#8

Your syntax was way off and your didn’t initialize angular.


#9

I initialize the angular module in controllers.js

but still not working


#10

Did you look at your header-bar syntax? In your codepen you have ion-header when you should have ion-header-bar


#11

yup i am using ion-header-bar now but not working


#12

Can you put together a plnkr of your project?


#13

Hey, initially when I started using ionic I was having the same problem. And I remember I overcame this using ion-content or ion-view I dont remember properly. I will let you know tomorrow morning. Right now I am replying through cell phone.


#14

plnkr ?? I did’nt get you?


#15

Ok Siddhartha i will w8 for your reply


#16

http://plnkr.co/

It’s a way for you to basically copy each of your files so we can see what the issue is.
Or if you have a link on github that works too


#17

Hi!
You have not yet reply me @siddhartha ?


#18
<!DOCTYPE html>
<html ng-app="">
	<head>
	    <meta charset="utf-8">
	    <title></title>
	    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	    <link href="css/css/ionic.css" rel="stylesheet">
	    <link href="css/main.css" rel="stylesheet">   
    </head>
  <body>
  <ion-side-menus>
<ion-side-menu-content>
 <ion-nav-bar animation="nav-title-slide-ios7"  class="bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title"></h1>
<div class="buttons">
<ion-nav-back-button class="button-clear">
<i class="ion-ios7-arrow-left back"></i>
</ion-nav-back-button>	
</div>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
 <ion-header-bar class="bar-assertive">
<h1 class="title" Menu</h1>
  </ion-header-bar>
   <ion-content>
 </ion-content>
</ion-side-menu>
</ion-side-menus>
<script src="js/ionic/ionic.bundle.min.js"></script>
</body>  
</html>

Your index.html should look like this.

And any template should look like:

<ion-view title="Settings">
    <ion-content class="padding">
    </ion-content>
</ion-view>

#19

Please check here my code i still have a problem of spacing. And my design is not showing in plnkr