Creating a persistent footer in a modal: A step-by-step guide

I'm currently working on a react-modal that slides in from the bottom of the screen with an animated effect. The challenge I am facing is getting the footer of the modal to stay fixed at the bottom of the browser window. Despite using the standard CSS code: 

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

You can find the code snippet attached below for reference.

.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>

I need help figuring out what could be causing the issue preventing the footer within the modal from staying fixed at the bottom of the screen.

htmlcssreact-modal

Answer №1

Here is a suggested solution. 

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

I'm working on a display page for my website. The main text in the center needs to change every 60 seconds. I have over 150 individual lines of text that I want to cycle through on the page. What would be the most efficient way to load all these te ...

javascriptcssajaxhtml

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...

htmlcssbootstrap-4

Creating dynamic web pages using Smarty templating engine to render HTML

I'm attempting to display my unprocessed HTML content using Smarty. {if !empty($brand.description)} {$brand.description} {/if} Although the initial text includes spaces and line breaks, when viewed, the HTML appears as plain text. I also experimen ...

phphtmlprestashopsmarty

Struggling to align a div in the middle using react and tailwindcss

Struggling to center a div in React with Tailwind, no matter what method I try. Here is my code: "use client"; import Image from "next/image"; import React from "react"; const LoginPage = () => { return ( <div cla ...

cssreactjsnext.jstailwind-css

Is it possible to modify the default behavior of a sensitive region within a button?

I created a calculator application in React and overall, it's working fine, however... I've noticed that when I hold a click longer, it only registers as a click if the mouse was pressed down and released on the button itself. Although I unders ...

javascriptcssreactjstypescript

Removing a function when changing screen size, specifically for responsive menus

$(document).ready(function () { // retrieve the width of the screen var screenWidth = 0; $(window).resize(function () { screenWidth = $(document).width(); // if the document's width is less than 768 pixels ...

javascriptjquerycss

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

javascriptjqueryhtmlundefined

Ways to center Bootstrap panel in the middle of a webpage

Is there a way to center this entire panel on the web page? I could use some guidance with this. Does anyone have recommendations for a good book to learn Bootstrap design? <div class="panel panel-default" style="max-width:500px;margin-left:auto;margi ...

htmlcssasp.net-mvctwitter-bootstrap

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

htmlcssbackground-color

Having trouble retrieving all img tags while scraping a website using BeautifulSoup (BS4)?

My goal is to collect a list of all the <img> image tags from a website. Unfortunately, I'm only able to retrieve a few and not the rest even though they are present in the HTML code when I inspect with developer tools. In my code snippet below, ...

pythonhtmlbeautifulsoup

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

javascriptjqueryhtmlcssbootstrap-4

I encountered an issue while attempting to retrieve data using route parameters. It seems that I am unable to access the 'imagepath' property as it is undefined

Is there a way to access data when the page loads, even if it is initially undefined? I keep getting this error message: "ERROR TypeError: Cannot read properties of undefined (reading 'imagepath')". How can I resolve this issue? import { Compone ...

htmlangulartypescriptcomponentsrouteparams

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...

javascriptjqueryhtmlcssevents

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

htmljquerycss

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

What is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

I am currently facing a challenge where users can input any HTML into a text box, and I need to manipulate that HTML by identifying elements such as anchor tags or divs. To achieve this, I have created a hidden div and copied the pasted HTML into it using ...

javascriptjqueryhtmlcss

Getting the present location on Google Maps for the web: A step-by-step guide

As a newcomer to this API, I have successfully generated an API key but am unsure of how to implement Google Maps. Despite my extensive research, I have been unable to find a solution that works for me. I am seeking assistance in locating users or devices ...

javascriptcssangularjsgoogle-maps

The icon on my page is not displaying, and the responsive menu is also not appearing

After tweaking the @media {} settings, I noticed that the icon displays properly when reduced, but disappears completely when fully covered with {}. Additionally, my responsive menu is not visible as expected. `@import url('https://fonts.googleap ...

javascripthtmlcssmedia-queriesfont-awesome

Tips for implementing fluid transitions between mouse X and Y coordinates using JavaScript

I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here. Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay w ...

javascriptjquerycss