Ionic-framework: button-full does not work in ion-footer-bar

[chadcampbell]

Buttons with the class button-full do not render properly when included in an ion-footer-bar. For instance:

<ion-footer-bar>
  <div class="buttons">
    <button class="button button-full">Button 1</button>
  </div>
  <h1 class="title">Title</h1>      
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Button 2</button>
  </div>
</ion-footer-bar>   

[mhartington]

Not really the intent for button-full.

button-full should be used inside your content, not in your footer.

[mhartington]

Going to close this as it's been a while and no updates. If you can provide more information, please feel free to open the issue again.

[anshulklr]

@mhartington i'm facing the same issue when the app is opened in tablet. The button in footer doesn't come as required. The button is a very small

[mhartington]

This is another alternative.
Other than this, you will have to write your own css for this.

http://codepen.io/mhartington/pen/bdGNGr

[anshulklr]

@mhartington the button works weel in all the devices with my css. just like it doesn't support in the tablet? Any idea about this ?

[mhartington]

could you open a new issue for this.

[anshulklr]

yeah i'll

[materazu]

work for me with this css class tricks :

    <div class="bar bar-footer bar-positive footer-button">
        <a class="button button-full button-clear button-icon icon ion-chevron-right" href="#/plop">
            A full link in bottom
        </a>
    </div>

div.footer-button a.button.button-full {
    width:100%;
    margin-top: 0
}

[vaibhav-bluedata]

@mhartington that tab hack is cool. I just made a minor change of adding tab-item-active class .. and its exactly what I needed. Thanks!

<ion-footer-bar class="bar-positive tabs tabs-stable">
  <a class="tab-item tab-item-active">
    Add Contact
  </a>
</ion-footer-bar>

[niksajanjic]

I added my button at the bottom like this:

<ion-footer-bar>
  <button class="bar bar-footer bar-positive" ng-click="closeModal()">
    <p class="title">Filter<p>
  </button>
</ion-footer-bar>

You can even get rid of button tag and make your ion-footer-bar pretend to be a "button" by passing ng-click to it:

<ion-footer-bar class="bar-positive" ng-click="closeModal()">
  <p class="title">Filter<p>
</ion-footer-bar>

But it should be a better way to achieve this.

[ghost]

Mb, not good idea, u can use $rootScope

<ion-footer-bar> <button class="bar bar-footer bar-positive" ng-click="closeModal()"></button> </ion-footer-bar>

$rootScope.closeModal = function ( ) { }