CODEWITHSUNDEEP
htmlcssionic2
Sampath
Sampath

Reputation: 65870

Ionic2 button must stick to the bottom of the page

Can you tell me how to fixed a button bottom of the page? At this moment it stays end of the item list.I need to set the button stays on the bottom of the page(or screen) while the user can scroll the items.I'm using Ionic2.

Plunker is here

page1.ts

    <ion-content padding class="page1">
      <ion-list no-lines>
        <ion-item class="background-color-light-gray">
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
          <ion-card>
            <ion-card-content>
              <h2 color="primary">My Event</h2>
            </ion-card-content>
          </ion-card>
        </ion-item>
      </ion-list>
    </ion-content>
  <div class="fixed-outside">
    <button ion-button block>Donate</button>
  </div>,
    })

css

.fixed-outside {
            position: absolute;
            bottom: 0;
            color: white;
            width: 100%;
            height: 120px;
            text-align: center;
        }

Upvotes: 4

Views: 1832

Answers (1)

Chris
Chris

Reputation: 4728

You need to use ion-footer, for example

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
     <button ion-button block>Donate</button>
  </ion-toolbar>
</ion-footer>

Upvotes: 10

Related Questions