CODEWITHSUNDEEP
htmlcssreact-modal
AnApprentice
AnApprentice

Reputation: 110970

How to create a fixed footer within a modal?

I'm creating a react-modal that animates in from the bottom of the screen. Once the modal is displayed, I need the modal to have a fixed/sticky footer that is fixed to the bottom of the browser window. For some reason, currently the footer is rendering off the screen using the standard:

position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

Please see the attached code.

.ReactModal__Overlay--after-open {
  opacity: 1;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(46,46,51,.95);
}

.ReactModal__Content--after-open {
  z-index: 100;
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 0 auto;
  bottom: 0%;
  background-color: #FFF;
}

.wrapper {
  background: yellow;
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 112px;
  width: 480px;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  height: 100vh;
  background: white;
}

.contentBody {
  background: pink;
}

.contentFooter {
  background: orange;
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
<div class="ReactModal__Overlay ReactModal__Overlay--after-open">
   <div class="ReactModal__Content ReactModal__Content--after-open">
      <div class="wrapper">
         <div class="contentBody">BODY</div>
         <div class="contentFooter">FOOTER</div>
      </div>
   </div>
</div>

What am I doing wrong which is preventing the footer within the modal from being fixed at the bottom of the screen?

Upvotes: 1

Views: 5230

Answers (1)

Friday Ameh
Friday Ameh

Reputation: 1684

Try this. 

.ReactModal__Overlay--after-open {
  opacity: 1;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(46,46,51,.95);
}

.ReactModal__Content--after-open {
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: 500px;
  margin: 0 auto;
  bottom: 0%;
  background-color: #FFF;

}

.wrapper {
  background: yellow;
  position: relative;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  height: calc(100vh - 115px);
  background: white;
}

.contentBody {
  background: pink;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.contentFooter {
  background: orange;
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
<body>
 <div class="ReactModal__Overlay ReactModal__Overlay--after-open">
   <div class="ReactModal__Content ReactModal__Content--after-open">
      <div class="wrapper">
         <div class="contentBody">BODY</div>
         <div class="contentFooter">FOOTER</div>
      </div>
   </div>
</div>
</body>

Upvotes: 2

Related Questions