CODEWITHSUNDEEP
htmlcssionic-framework
Firdaus Ismail
Firdaus Ismail

Reputation: 145

How to make buttons stay fixed at the bottom while scrolling

I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.

The button somehow does not stay fixed at the bottom 

  .fix-bottom {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

  .d-flex {
  display: flex;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

<div class="fix-bottom btn-shadow ">
  <div class="d-flex">
    <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD TO CART</button>
    <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY NOW</button>
  </div>
</div>

Upvotes: 5

Views: 15494

Answers (2)

LiN
LiN

Reputation: 125

Try this example. When you scroll to the up the button stays bottom fixed. It's simple css. I've add paragraph many times just to show scrolling effect.

#bottom button {
  position: fixed;
  right: 10%;
  bottom: 0%;
  z-index: 1000;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
 filter: progid: dximagetransform.microsoft.basicimage(rotation=3);
  text-align: center;
  text-decoration: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<p>I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.
</p>
<p>The button somehow does not stay fixed at the bottom 
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.</p>

<p>The button somehow does not stay fixed at the bottom 
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.</p>

<p>The button somehow does not stay fixed at the bottom 
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.</p>

<p>The button somehow does not stay fixed at the bottom
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.

The button somehow does not stay fixed at the bottom </p>
<div id="bottom">
    <button id="bot_open" class="btn btn-primary btn-rounded">Button</button>
  </div>

Upvotes: 1

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

If you want to put your button in bottom of the page then, You need to put your button in ion-footer like this way

 <ion-content>.... </ion-content>
<ion-footer>
  <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD
    TO CART</button>
  <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY
    NOW</button>
</ion-footer>

I have tried your code in this template and it's working.so please try this code.

Upvotes: 2

Related Questions