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
Related
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>
Bottom keeps getting cut of in mobile view but perfectly fine in browser even when it's resized. I thought maybe the media queries aren't being addressed but they look fine. I've tried moving .square up by putting top:-55%; but it will only move in desktop browser. It doesn't move in mobile for some reason.
<meta name="viewport" content="initial-scale=1">
/* Iphone */
#media (min-width: 300px) and (max-width: 767px) {
.project_miniwrap {
min-width: 90%;
top: 33%;
}
#tu {
margin-top: 117px;
margin-left: 235px
}
#dar {
margin-top: 17px;
margin-left: 25px
}
.square {
color: #0D0D0D;
font-family: 'NimbusSansNo5TOT-Medium';
font-size: 38px;
letter-spacing: -1px;
display: block;
margin: auto;
position: absolute;
top: -15%;
left: 0;
bottom: 0;
right: 0;
width: 295px;
height: 160px
}
.l1,
.l2,
.l3,
.l4 {
position: absolute;
background: transparent;
width: 0px;
height: 0px;
background-color: black;
color: #0D0D0D
}
.l1 {
left: 0;
bottom: 0;
width: 8px
}
.l2 {
top: 0;
left: 0;
height: 8px
}
.l3 {
right: 0;
top: 0;
width: 8px
}
.l4 {
bottom: 0;
right: 0;
height: 8px
}
.description {
width: 90%
}
.snippet {
display: block;
width: 100%;
line-height: 45px;
margin-bottom: 10%;
font-size: 36px
}
.main_description {
display: block;
width: 100%
}
#anchor-point {
bottom: 90%;
position: absolute
}
.anchor-point {
bottom: 90%;
position: absolute
}
#container {
top: 30%
}
}
#media (max-height: 479px) {
#tu {
margin-top: 117px;
margin-left: 235px
}
#dar {
margin-top: 17px;
margin-left: 25px
}
.square {
color: #0D0D0D;
font-family: 'NimbusSansNo5TOT-Medium';
font-size: 38px;
letter-spacing: -1px;
display: block;
margin: auto;
position: absolute;
top: -15%;
left: 0;
bottom: 0;
right: 0;
width: 295px;
height: 160px
}
.l1,
.l2,
.l3,
.l4 {
position: absolute;
background: transparent;
width: 0px;
height: 0px;
background-color: black;
color: #0D0D0D
}
.l1 {
left: 0;
bottom: 0;
width: 8px
}
.l2 {
top: 0;
left: 0;
height: 8px
}
.l3 {
right: 0;
top: 0;
width: 8px
}
.l4 {
bottom: 0;
right: 0;
height: 8px
}
}
Site: http://imdarrien.com/
I think it's being cut off because the viewport height is not large enough. Since you position .project_miniwrap using top:35%;, it's always going to position it at 35% from the top of the parent, not in the center.
Try using this to center the the div instead:
.project_miniwrap {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
This is the more compatible version of the above that you can use if you know the width and height, otherwise you will need to center it using JavaScript.
.project_miniwrap {
top: 50%;
left: 50%;
width: 200px;
height: 300px;
margin-left: -100px;
margin-right: -150px;
}
I have this html file:
<div style="
width:400px;
height:300px;
background-color:#009966;">
</div>
I'm opening it as a modal window with colorbox, that has this CSS:
#cboxOverlay, #cboxWrapper, #colorbox {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxWrapper {
max-width: none;
}
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%}
#cboxBottomLeft, #cboxMiddleLeft {
clear: left;
}
#cboxContent {
position: relative;
}
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle {
margin: 0;
}
#cboxLoadingGraphic, #cboxLoadingOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%}
#cboxClose, #cboxNext, #cboxPrevious, #cboxSlideshow {
cursor: pointer;
}
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#cboxContent, #cboxLoadedContent, #colorbox {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 32px;
overflow: visible;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
padding: 1px;
}
#cboxLoadingGraphic {
background: url(../images/loading.gif) no-repeat center center;
}
#cboxLoadingOverlay {
background: #000;
}
#cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000;
}
#cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px;
}
#cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -30px;
left:390px;
background: url(../images/controls.png) no-repeat;
}
#cboxClose:active, #cboxNext:active, #cboxPrevious:active, #cboxSlideshow:active {
outline: 0;
}
#cboxPrevious {
background-position: 0 0;
right: 44px;
}
#cboxPrevious:hover {
background-position: 0 -25px;
}
#cboxNext {
background-position: -25px 0;
right: 22px;
}
#cboxNext:hover {
background-position: -25px -25px;
}
#cboxClose {
background-position: -50px 0;
right: 0;
}
#cboxClose:hover {
background-position: -50px -25px;
}
.cboxSlideshow_off #cboxPrevious, .cboxSlideshow_on #cboxPrevious {
right: 66px;
}
.cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px;
}
.cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px;
}
.cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0;
right: 44px;
}
.cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px;
}
I've tried playing with the position of the "X" button, I want it to be outside of the DIV, say 50px to the top and 50px to the right, by modifying #cboxClose, but that image gets cutted off, as you can see in the photo.
what's causing this?
The container #cboxWrapper has overflow: hidden; set (near the top of your included CSS); if you add overflow: visible; to that selector, your moved X button should be visible.
I wouldn't recommend changing the original overflow: hidden; declaration, since it involves other selectors, but just adding the the following:
#cboxWrapper {
overflow: visible;
}
If you extend the result window, the video overlaps the section below it.
I want the video to stay within the height of the section, in this case height:100vh.
How would I go about this? Here's a jsFiddle.
* {
padding: 0px;
margin: 0px;
}
.Page-01 {
width: 100%;
height: 100vh;
background-color: #0000ff;
margin: 0;
padding: 0;
z-index: 15;
}
.Page-02 {
width: 100%;
height: 100vh;
background-color: #FFFF00;
margin: 0;
padding: 0;
border: 0;
z-index: 15;
}
#videowrapper {
padding-bottom: 56.2%;
overflow: hidden;
z-index: 15;
height: 0;
}
#videowrapper iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Page-03 {
width: 100%;
height: 100vh;
background-color: #FF0000;
margin: 0;
padding: 0;
z-index: 15;
}
There is some odd stuff going on there because #videowrapper iframe is set to height: 100%; but its parent's height is #videowrapper { height: 0; padding-bottom: 56.2%;
Try setting this instead:
#videowrapper {
overflow: hidden;
z-index: 15;
height: 100%;
}
body {
background-color: #FFFDEC;
}
.header {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: #04A7A6;
margin: 0;
display: block;
z-index: 10;
}
.headermenu {
xposition: fixed;
top: 50px;
left: 0;
height: 50px;
width: 100%;
background-color: #333;
color: #333;
margin: 0;
overflow: visible;
z-index: 20;
}
This code => doesn't display my second header...? I know it has something to do with the header conflicting with the headermenu, but it doesn't conflict with the body background?
should
xposition:fixed;
be
position:fixed;
?
Working Fiddle