Issue
I have space appearing below my html and body element and was wondering what caused it. This is extending my page more than it should. I have a feeling the modal window is causing it. I tried setting overflow: hidden on the body, the modal container, as well as its individual child items but that didn't work.
Here is my CSS:
* {
box-sizing: border-box;
}
body {
background-color: rgb(243, 243, 243);
font-family: 'Roboto', sans-serif;
}
p {
color: #444E55;
}
.container {
margin: 0 auto;
width: 95%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px;
grid-auto-rows: auto;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
header {
grid-column: 1/span 3;
color: #4A4A4A
}
img {
display: block;
border-radius: 50%;
height: 100px;
}
.item {
padding: 12px;
background-color: #ffffff;
border: 1px rgb(197, 197, 197) solid;
}
.item:hover {
cursor: pointer;
}
.item > * {
pointer-events: none;
}
.card {
border-radius: 3px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.text-container {
line-height: 0;
margin-left: 10px;
}
.modal-container {
position: relative;
bottom: 500px;
}
.modal {
background-color: #ffffff;
border: 1px rgb(197, 197, 197) solid;
border-radius: 3px;
padding: 50px;
margin: 0 auto;
width: 30%;
z-index: 1;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
}
.box.one {
border-bottom: 1px grey solid;
}
.arrow {
display: inline-block;
position: relative;
left: 100%;
bottom: 30px;
}
.arrow:hover {
cursor: pointer;
}
.arrow > * {
pointer-events: none;
}
.fa.fa-window-close {
font-family: fontAwesome;
}
.off {
display: none;
}
.on {
display: block;
}
Here is a link to my fiddle: https://jsfiddle.net/v83zqofp/1/
I even tried setting an explicit height on the body, but even the HTML and body are smaller than the viewport height.
Is it my modal window that is creating the extra space or is it something else?
Solution
The problem is that you are not positioning your modal correctly. Essentially, you want your modal to be in the centre of the screen. We can start this process by using absolute positioning with values top: 50%
and left: 50%
. Great! This gets us part of the way there, but not the whole way there, as you may notice with only that change, the modal isn't centred (only the top left of the modal is). The reason is because the origin of the element is the top left not the centre, so it makes your modal's top left corner centred. What you can then do is use a CSS transform to offset the origin and move it back to where it needs to be, -50%
in each direction. Essentially, this is the required CSS change (the rest of your code is fine):
.modal-container {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Essentially:
- Use absolute positioning to situate the modal in the centre (50%, 50%)
- Use a CSS transform to "translate" the X and Y coordinates back (-50%, -50%)
I have forked your fiddle with the working solution: https://jsfiddle.net/f34nqh1r/
I've also provided a CodePen for how I generally like to do modals, which includes support for scrollable content. https://codepen.io/tinacious/pen/qeWMzB
The reason you were getting the extra space is because you were using relative positioning, which doesn't pull it out of the original flow. You put the requirement of 500px which required that at all times, while in the flow of the document, there be 500px at the bottom. So the reason you were getting the extra spacing is position: relative; bottom: 500px;
Answered By - Tina
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.