I am having a little issue with a margin on the left side of my footer, as in the image:
and this is the code I am using for my template:
<ion-footer-bar align-title="left" ng-controller="FooterController">
<div class="tabs tabs-icon-top tabs-positive tabs-striped">
<a class="tab-item active" href="#/app/sports">
CONTENT
</a>
</div>
</ion-footer-bar>
but if I do the following, everything works properly:
<div class="tabs tabs-icon-top tabs-striped" ng-controller="FooterController">
<a class="tab-item active" href="#/app/sports">
<i class="icon ion-ios-americanfootball"></i>
CONTENT
</a>
</div>
the issue here seems to be the <ion-footer>
but why ?
That is not the way you should have tabs setup .
Use ion-tabs and ion-tab, not ion-footer and a link
but anyways if I do it the way you say, the issue persists once I put the ion-footer
, so your comment is no helping me
Not if you use
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
Anyways, it comes down to that is not the intended purpose of the ion-footer.
What you want is the ion-tabs.
exactly what I asked. Right now my code works as you saw it above.
My issue is, if I add ion-footer
on top of ion-tabs
, then the margin comes up.
and also, I am not working with routes in this part, so the way you say: still not the proper one.
Then don’t add the footer, or do this.
<ion-footer-bar class="tabs tabs-icon-top tabs-positive tabs-striped" ng-controller="FooterController">
<a class="tab-item active" href="#/app/sports">
CONTENT
</a>
</ion-footer-bar>
I have try the way you mentioned , but seems not works well.
We also want add more components in the footer.
<ion-footer-bar class="bar-balanced">
<div class="tabs tabs-secondary tabs-icon-top">
<div class="tab-item" ng-click="test()">
<i class="icon ion-ios-color-filter"></i>
Color
</div>
<div class="tab-item" ng-click="showPopup()">
<i class="icon ion-ios-calculator-outline"></i>
Size
</div>
<div class="tab-item" ng-click="showActionSheet()">
<i class="icon ion-bag"></i>
Add to cart
</div>
</div>
<!--<button class="button button-icon icon ion-ios-cart-outline" ng-click="showPopup()"></button>-->
<!--<h1 class="title"></h1>-->
<!--<button class="button button-icon icon ion-ios-information-outline" ng-click="showActionSheet()"></button>-->