Bar-footer on top of content


#1

Hi,

I’m using a bar-footer with a button that I want to have it stick to the bottom. Problem is, instead of sticking to the bottom it’s now on top of it. Any clues? Here’s my code:

 <ion-content class="has-header has-footer">
<ul class="list">
  <div class="item item-divider">
    Items-1
  </div>
		<li class="item item-checkbox">
 		<label class="checkbox checkbox-balanced">
   		<input type="checkbox">
 		</label>
 			Item-1
	</li>
  <li class="item item-checkbox">
    <label class="checkbox checkbox-balanced">
      <input type="checkbox">
    </label>
      Item-2
  </li>
  <li class="item item-checkbox">
    <label class="checkbox checkbox-balanced">
      <input type="checkbox">
    </label>
      Item-3
  </li>
  <div class="item item-divider">
    Items-2
  </div>
	<li class="item item-checkbox">
 		<label class="checkbox checkbox-balanced">
   		<input type="checkbox">
 		</label>
 			Item-1
	</li>
	<li class="item item-checkbox">
 		<label class="checkbox checkbox-balanced">
   		<input type="checkbox">
 		</label>
 			Item-2
	</li>
	<li class="item item-checkbox">
 		<label class="checkbox checkbox-balanced">
   		<input type="checkbox">
 		</label>
 			Item-3
	</li>
	<li class="item item-checkbox">
 		<label class="checkbox checkbox-balanced">
   		<input type="checkbox">
 		</label>
 		Item-4
	</li>
  <li class="item item-checkbox">
    <label class="checkbox checkbox-balanced">
      <input type="checkbox">
    </label>
      Item-5
  </li>
  <li class="item item-checkbox">
    <label class="checkbox checkbox-balanced">
      <input type="checkbox">
    </label>
     Item-6
  </li>
	</ul>
<ion-footer>
	<a href="#/app/buy">
		<div class="bar bar-footer bar-balanced">
			<div class="title">BUY</div>
		</div>
	</a>
</ion-footer>

#2

You haven’t closed off the <ion-content> tag before the <ion-footer>

Here’s an example of what I think you’re looking for that works fine.

<ion-header-bar class="bar-dark">
  <h1 class="title">Details</h1>
</ion-header-bar>

<ion-content class="has-header">
  <img class="full-image" ng-src="{{product.image}}" />
  <p>{{product.description}}</p>
</ion-content>
<ion-footer-bar align-title="left" class="bar-light">
  <div class="title buttons row">
    <button class="button col" ng-click="hide(product)">Hide</button>
    <button class="button col" ng-click="share(product)">Share</button>
    <button class="button col" ng-click="save(product)">Save</button>
  </div>
</ion-footer-bar>

#3

Awesome, this worked. Thanks a lot!