CODEWITHSUNDEEP
ionic-framework
Mohammad Akbari
Mohammad Akbari

Reputation: 4766

ionic add two button in ion-footer-bar

i want add two button in ion-footer-bar like picture but my code not work correctly.

<ion-footer-bar class="bar-positive" padding="false">
    <h1 class="title col col-50 no-padding remove-filter">
        Button 333333333
    </h1>
    <h1 class="title col col-50 no-padding remove-filter">
        Button 333333333
    </h1>
</ion-footer-bar>

enter image description here

Upvotes: 5

Views: 19583

Answers (5)

Hairus
Hairus

Reputation: 168

In ionic2+, you can do something like this..

<ion-header>
    <ion-navbar>
        <ion-title>My Page</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
</ion-content>
<ion-footer>
    <ion-row>
        <ion-col no-padding>
            <button no-margin ion-button full large color="primary">Update</button>
        </ion-col>
        <ion-col no-padding>
            <button no-margin ion-button full large color="danger">Cancel</button>
        </ion-col>
    </ion-row>
</ion-footer>

Upvotes: 10

Rohan J Mohite
Rohan J Mohite

Reputation: 2613

If Someone came across this question.

Alternative solution to display buttons in footer for ionic.

Ionic footbar with two buttons

<ion-footer-bar class = "bar-assertive">
  <div class = "buttons">
   <button class = "button">Button</button>
  </div>

  <h1 class = "title">Footer</h1>

  <div class = "buttons">
   <button class = "button icon ion-home"></button>
  </div>
</ion-footer-bar>

Note: Above code needs to be go below <ion-content></ion-content> tag

Upvotes: 0

Nithya
Nithya

Reputation: 52

You can implement below code to add two button in footer.
Use these code below ion-content and inside ion-pane. 

 <div style="position: absolute; background-color: transparent; bottom: 0px; width: 100%">
      <div class="row">
      <button style="color: black; background-color: wheat;" class="col col-50 button button-block">button 1</button>
      <button style="color: black; background-color: blue;" class="col col-50 button button-block">button 2</button>
      </div>
</div>

Upvotes: 0

Arjun Sunil Kumar
Arjun Sunil Kumar

Reputation: 1838

This is how i implemented it.

  <ion-footer-bar class="bar button-bar-footer" style="height: auto;">
     <div class="button-bar" style="position: absolute;bottom: 0;" >
       <a style="min-width: 50%;border-radius: 0px;" class="button button-dark icon-left ion-close">Cancel</a>
       <a style="min-width: 50%;border-radius: 0px;"  class="button button-balanced icon-left ion-checkmark">Save</a>
    </div>
  </ion-footer-bar>

EDIT: This did not work well on android device, so remove the <ionic-footer> . The new code is 

<div id="footer" class="button-bar"  >
  <a style="min-width: 50%;border-radius: 0px;" class="button button-lite icon-left ion-close">Cancel</a>
  <a style="min-width: 50%;border-radius: 0px;"  class="button button-calm icon-left ion-checkmark">Save</a>
</div>

CSS

/*Footer*/
#footer {
  position : absolute;
  bottom : 0;
  height : 40px;
  margin-top : 40px;
}

2 Buttons ionic footer

Upvotes: 1

Ameer Hamza
Ameer Hamza

Reputation: 606

you can try like this... hope it may help

    <ion-footer-bar align-title="left" class="bar-assertive">
        <ion-tabs class="tabs-positive tabs-icon-top">

          <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <!-- Tab 1 content -->
          </ion-tab>

          <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
            <!-- Tab 2 content -->
          </ion-tab>

          <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <!-- Tab 3 content -->
          </ion-tab>

        </ion-tabs>
</ion-footer-bar>

Upvotes: 1

Related Questions