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?
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>
Related
I'm new to html/CSS starting a few weeks ago and I decided work on my first template for my little gaming network and got a issue. The problem is I have a ideal header but when I do CSS for text over a header nothing shows up and the header is covering the text no matter what I do.
This how I would like have it + white text over it .
#header .h-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
Assuming you're trying to achieve a dark transparent bar that overlaps a background, you were close. You were setting the height to 100% in more than one way.
However, this is probably not the best way to go about it.
#header .h-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 40px;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}
<div id="header">
<div class="h-bg">
</div>
</div>
If you need the dark transparent bar to be the navigation, you shouldn't use pseudo elements for it. Instead, a set of div elements is all you need.
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background-image: url('https://i.imgur.com/OW0YQWa.png');
background-position: center;
background-size: cover;
max-height: 300px;
}
.h-bg{
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
.h-bg ul{list-style: none;}
.h-bg ul li{display: inline-block; padding: 0 10px;}
<div id="header">
<div class="h-bg">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
In my webpage I have a left and a right part, they are not on the same nesting though. I want the left part to fill 25% of the page and the right part to fill the rest of the width.
Simply putting 75% isn't cutting it for me because the right part also needs a 30px right margin. A right padding won't work because my content and background-color overflows then.
Do you have an idea how to solve this?
The .left (blue) and .right(yellow) div should always perfectly meet each other and the .right needs to keep it's 30px right margin.
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: 75%;
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
It's not a good idea to create a layout using only absolute position. You may better rely on flexbox for example:
body {
height: 100vh;
margin: 0;
display: flex;
background: grey;
}
.left {
flex: 1;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
flex: 4;
margin-top: 45px;
margin-right: 30px;
background-color: yellow;
}
<div class="left">TEST</div>
<div class="right">TEST</div>
But in case you want to keep your code, you need to consider the margin within the calculation of the width:
body {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
background-color: grey;
}
.left {
position: absolute;
top: 0;
bottom: 0;
padding-top: 0;
padding-bottom: 0;
left: 0;
width: 25%;
border-right: 1px solid #eeeeee;
background-color: lightblue;
}
.right {
position: absolute;
width: calc(75% - 30px);
right: 0px;
top: 45px;
bottom: 0;
/*padding-right: 30px;*/
margin-right: 30px;
background-color: yellow;
}
<body>
<div class="main">
<div class="left">TEST</div>
</div>
<div class="right">TEST</div>
</body>
Basically .second has to be above .third. Which only is in Firefox though. Unfortunatelly I can't move .second out of .fifth, which is why it is giving me such a hard time.
For further information: .third is supposed to be a modal background to darken the content .fifth and the footer .fourth. The modals content is .second. The Web-App is supposed to be for Safari on iPad.
JSFiddle
<div class="first"></div>
<div class="fifth">
<div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>
.first{
z-index: 10;
/* styling */
position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
z-index: 9;
/* styling */
position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
}
.third{
z-index: 8;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
}
.fourth{
z-index: 7;
/* styling */
position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
}
.fifth{
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}
Give .fifth a z-index greater than .third.
.first{
z-index: 10;
/* styling */
position: fixed; top: 0; left: 0; right: 0; height: 50px; background: lightblue;
}
.second{
z-index: 9; /* You probably do not need this */
/* styling */
position: fixed; top: 100px; left: 50px; right: 50px; bottom: 100px; background: darkseagreen;
}
.third{
z-index: 8;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1);
}
.fourth{
z-index: 7;
/* styling */
position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: indianred;
}
.fifth{
z-index: 9;
/* styling */
position: fixed; top: 50px; left: 0; right: 0; bottom: 50px; background: darkgrey;
}
<div class="first"></div>
<div class="fifth">
<div class="second">I should be on top.</div>
</div>
<div class="third"></div>
<div class="fourth"></div>
Managed to move .second out of .fifth in the end. Works for me, unfortunately no satisfying answer.
There are lot of solutions for this problem that puts height 100% and width 100%, but the solutions don't take care about the content under the modal.
In my example in jsfiddle there is an error. Where am I wrong?
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
border-radius: 0;
}
Here the jsfiddle
I have found a solution that works and updated my jsfiddle
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.modal-dialog {
position: fixed;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.modal-header {
position: absolute;
top: 0;
left: 0;
right: 0;
border: none;
}
.modal-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
box-shadow: none;
}
.modal-body {
position: absolute;
top: 50px;
bottom: 0;
font-size: 15px;
overflow: auto;
margin-bottom: 60px;
padding: 0 15px 0;
width: 100%;
}
.modal-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 60px;
padding: 10px;
background: #f1f3f5;
}
/* to delete the scrollbar */
/*
::-webkit-scrollbar {
-webkit-appearance: none;
background: #f1f3f5;
border-left: 1px solid darken(#f1f3f5, 10%);
width: 10px;
}
::-webkit-scrollbar-thumb {
background: darken(#f1f3f5, 20%);
}
*/
The problem is with the height being 100% as it fills only the window height. Use min-height instead:
.modal-dialog {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
Updated fiddle
I'm using the following HTML / CSS to overlay a box on a website i'm working on. I want the box to center in the screen, not start based on the centering already going on. So basically the white box should be on the center of the page, not the text test
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.centrediv {
height: 200px;
width: 800px;
background-color: white;
border: 1px solid black;
}
<div class="loading"><div class="centrediv">Test</div></div>
Use transform: translate(-50%, -50%), top: 50% and left: 50% on .centreDiv to center it horizontally and vertically.
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.centrediv {
position: absolute;
height: 100px;
width: 200px;
background-color: white;
border: 1px solid black;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
<div class="loading">
<div class="centrediv">Test</div>
</div>