margin bottom seems to disappear on css grid when overflow appears.
no matter which way i approach the layout of my page (flexbox, css grid, fixed) i seem to loose margin/padding bottom when using css grid.
an example of the issue:
HTML
<div class="header"> </div>
<div class="nav"> </div>
<div class="article">
<div class="settings__grid">
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
</div>
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
}
.nav {
position: fixed;
z-index: 1;
top: 20px;
left: 0;
width: 200px;
height: calc(100% - 20px);
background: #FAF9F8;
border-right: 1px solid #d9d9d9;
}
.article {
background: #F3F3F5;
position: relative;
top: 20px;
left: 200px;
width: calc(100% - 200px);
height: calc(100% - 20px);
padding: 10px;
}
.settings__grid {
display: grid;
height: 100%;
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
grid-auto-rows: 14rem;
grid-gap: 3rem;
}
.settings__grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
#media (max-width: 768px) {
.nav {
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
height: 60px;
}
.article {
height: calc(100% - 80px);
left: 0;
width: 100%;
}
}
https://codepen.io/anon/pen/EzWmeg
i expect the margin/padding to be consistent to what i define on parent but it doesn't and disappears / collapses
The problem is merely in setting a height on .article; this sets the height to be the initial viewport (with no consideration given to the scroll).
Removing this height solves the problem:
html,
body {
margin: 0;
height: 100%;
}
.header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
}
.nav {
position: fixed;
z-index: 1;
top: 20px;
left: 0;
width: 200px;
height: calc(100% - 20px);
background: #FAF9F8;
border-right: 1px solid #d9d9d9;
}
.article {
background: #F3F3F5;
position: relative;
top: 20px;
left: 200px;
width: calc(100% - 200px);
/*height: calc(100% - 20px);*/
padding: 10px;
}
.settings__grid {
display: grid;
height: 100%;
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
grid-auto-rows: 14rem;
grid-gap: 3rem;
}
.settings__grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
#media (max-width: 768px) {
.nav {
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
height: 60px;
}
.article {
/*height: calc(100% - 80px);
left: 0;
width: 100%;
}
}
<div class="header"> </div>
<div class="nav"> </div>
<div class="article">
<div class="settings__grid">
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
</div>
</div>
You can set the after to do my trick:
&::after {
content: '';
position: relative;
height: 16rem;
width: 100%;
}
Related
In a css/html element on a webpage I've made, if a user zooms in or out on their browser, artifacts emerge showing a line. Here is a code pen of the issue. Zoom in or out on your browser to see the red line at top emerge like below:
I've read that these problems can emerge because a browser can set the zoom to 1.5x, thus creating rounding issues for pixels. See slack post here. But I'm not sure what the appropriate fix should be. In my case I want the triangles at each end of my rectangle element which I create via css styling. Besides recreating the graphic via svg, is there any good tricks?
Here is the html/css in codepen:
#root {
display: block;
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 24px;
max-width: 400px;
float: center;
position: relative;
}
#gridRoot {
display: flex;
flex-flow: column wrap;
top: 50%;
left: 50%;
align-content: center;
}
#LegendContainer {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
width: 100%;
align-items: center;
justify-content: space-between;
}
#container {
background-color: grey;
postion: relative;
height: 120px;
justify-content: center;
left: calc(50% - 60px);
text-align: center;
top: calc(50% - 60px);
}
#circle {
transform: rotate(7.39deg);
}
#jss {
display: flex;
position: absolute;
background: red;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss::before {
left: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss::after {
right: 0;
width: 0;
bottom: 0;
height: 0;
content: '';
position: absolute;
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="gridRoot">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
</div>
</div>
</div>
</div>
</div>
The ::before and ::after elements seemed to be causing the issue. Solution;
body {
margin: 0;
}
#container {
background-color: grey;
position: relative;
display: flex;
height: 120px;
justify-content: center;
text-align: center;
}
#jss {
display: flex;
position: absolute;
top: 40px;
width: 110px;
opacity: 80%;
height: 20px;
}
#jss-internal {
background: red;
width: 100%;
}
#jss-before {
content: '';
transform: rotate(180deg);
border-top: 10px solid white;
border-left: 10px solid #00007f;
border-bottom: 10px solid white;
}
#jss-after {
border-top: 10px solid white;
border-left: 10px solid #7f0000;
border-bottom: 10px solid white;
}
<div id="root">
<div id="LegendContainer">
<div id="container">
<div id="circle">
</div>
<div id="jss">
<div id="jss-before">
</div>
<div id="jss-internal">
</div>
<div id="jss-after">
</div>
</div>
</div>
</div>
</div>
I have a horizontal bar that has 4 items or maybe more. What I am trying to do is that when the browser is resized each item of the horizontal bar with its respective element, however, I am using twitter-bootstrap 4, but it doesn't seem to work either by default
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
.flex7-child-1 {
height: 40%;
position: relative;
}
.flex7-child-1:before {
content: '';
position: absolute;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
background-size: contain;
top: -60px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-2:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 88px;
left: -170px;
right: 0;
margin: 24px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-3:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-4:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 170px;
right: 0;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-5:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 58px;
left: 166px;
right: -174px;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
<div class="post-content-wrapper">
<div class="flex flex7">
<div class="child flex7-child flex7-child-1"></div>
<div class="child flex7-child flex7-child-2"></div>
<div class="child flex7-child flex7-child-3"></div>
<div class="child flex7-child flex7-child-4"></div>
<div class="child flex7-child flex7-child-5"></div>
</div>
</div>
before toggle
after toggle, I am expecting to have the same position even when I resize the layout without breaking the elements
Here's a better way to achieve responsive consistent styles for your horizontal bars. Note that individual styles for each .flex7-child-#:before has been removed, and all .flex7-child elements now use flexbox.
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
/* Pay attention to below */
.flex7-child {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex7-child:before {
content: '';
position: relative;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
top: -70px;
background-size: contain;
display: block;
width: 50px;
height: 50px;
}
/* Pay attention to above */
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-1 {
height: 40%;
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
This isn't an exact example, but I would wrap your thumbnails and bars together something like this:
#container{
margin: auto;
width: 800px;
height: 400px;
border: 3px solid gainsboro;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.flex-item{
height: 100%;
display: flex;
flex-direction: column-reverse;
}
.flex-item > .bar{
border-radius: 5px;
width: 80px;
background-color: mediumpurple;
border: 1px solid blue;
margin-top: 10px;
}
.flex-item:after{
display: block;
content: '';
height: 80px;
width: 80px;
background-image: url("https://via.placeholder.com/80.png")
}
<div id="container">
<div class="flex-item">
<div class="bar" style="height:40%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:20%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:60%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:50%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:70%"></div>
</div>
</div>
What is the best way to align a fixed div within a relative div to the right, while still keeping an inherited max-width?
Update (Jan 24, 2018): I've answered this question with the solution. See here.
See the following snippet for further reference:
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
background: blue;
float: right;
color: white;
text-align: center;
right: 0;
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
A fixed element's position is always relative to the viewport/window, never to any other element.
The only thing you can do (with CSS) is to use right: calc(50% - 250px); for its position to have it right aligned to the right border of the 500px wide centered "parent" element, but that will only work if the screen is wider or equal to the max-width of the "parent" element.
Addition after comments: Plus add a media query for screens below 500px width with right: 0 (thanks to #MrLister for that)
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media (max-width: 500px) {
.box {
right: 0px;
}
}
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
What if you did this:
Css
body {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 100%;
}
.max-width {
margin: 0 auto;
max-width: 500px;
height: 1000px;
position: relative;
box-sizing: border-box;
background-color: lightgrey;
}
.box {
max-width: inherit;
width: 20%;
height: 20px;
position: fixed;
top: 0;
right: calc(50% - 250px);
background: blue;
float: right;
color: white;
text-align: center;
}
#media screen and (max-width: 500px) {
.box {
right: 0;
}
}
#media screen and (min-width: 501px) {
.box {
width: 100px; /* 100px is 20% of the max-width */
}
}
Html
<div class="container">
<div class="max-width">
<div class="box">fix to right?</div>
</div>
</div>
Figured something out. It can be done after all!
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
.max-width {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: lightgrey;
position: relative;
}
.box1 {
position: relative;
width: 20%;
height: 100px;
background-color: yellow;
text-align: center;
}
.container {
position: absolute;
width: 60%;
background-color: purple;
height: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.wrap-box {
position: fixed;
max-width: 500px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.wrap-box > div.box2 {
width: 20%;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.wrap-box > div.box3 {
width: 20%;
height: 100px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
}
<div class="max-width">
<div class="box1">position: relative, width: 20%</div>
<div class="container">
position: absolute, width: 60%
<div class="wrap-box">
<div class="box2">position: fixed (top), width: 20%</div>
<div class="box3">position: fixed (bottom), width: 20%</div>
</div>
</div>
</div>
I have a block with several items. When I click on the menu item it is highlighting and extending to the left border of the window.
I did this with the help of an absolutely positioned element, and set the width to 1000px, but this option does not work. This red bar should rest against the edge of the window at any resolution.
html
<div class="flex-menu-area">
<div class="container">
<div class="flex-menu">
<div class="left-flex-column">
<div class="flex-menu-select"><span>item 1</span></div>
<div class="flex-menu-select"><span>item 2</span></div>
<div class="flex-menu-select"><span>item 3</span></div>
</div>
<div class="right-left-column">
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
<div class="object"><span>item1content</span></div>
</div>
</div>
</div>
</div>
css
.flex-menu-area {
background: #fff;
width: 100%;
height: 512px;
.flex-menu {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
.left-flex-column {
max-width: 256px;
width: 100%;
outline: 1px solid gray;
height: 512px;
.flex-menu-select {
font-size: 20px;
line-height: 26px;
font-weight: 600;
text-align: left;
color: $text-color;
padding-top: 43px;
padding-bottom: 43px;
max-width: 100%;
border-bottom: 1px solid gray;
position: relative;
&:hover {
background: #ccc;
&:before {
position: absolute;
width: 1000px;
height: 100%;
content: "";
display: block;
top: 0px;
left: -1000px;
background: red;
}
}
}
}
.right-left-column {
outline: 1px solid gray;
height: 512px;
width: 884px;
background: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #eee;
.object {
outline: 1px solid red;
font-size: 20px;
line-height: 40px;
}
}
}
}
Solution:
&:before {
position: absolute;
width: 100vw;
right: 0;
height: 100%;
content: "";
display: block;
top: 0px;
background: #fff;
z-index: -1;
}
Set the width and left values of your &:before to:
width: calc((100vw - 100%) /2);
left: calc(0 - ((100vw - 100%) /2));
I think that should help, but I don't have access to a screen large enough to test right now so apologies if my calcs are slightly off.
I'm trying to replicate this, essentially:
So basically two 50% <div>'s side-by-side, with some form of absolute positioning (I assume) to achieve the left box to go over the top of the right box (the red line is just representing the middle of the viewport)
Any hints? Thanks :)
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 100%;
height: 100%;
background-color: blue;
transform: skewX(-20deg) translateX(-40%);
position: absolute;
z-index: 10;
}
.box2 {
width: 100%;
height: 100%;
background-color: red;
z-index: 0;
}
Should be pretty simple with CSS3.
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
I offer a version without the transformation, using pseudoelement. It is faster and does not distort the text.
.container {
width: 500px;
height: 300px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box1 {
width: 50%;
height: 100%;
background-color: blue;
position: absolute;
left: 0;
}
.box1::after{
background: linear-gradient(to bottom right, blue 50%, transparent 0);
content: " ";
width: 20%;
height: 100%;
position: absolute;
left: 100%;
z-index: 1;
}
.box2 {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
right: 0;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Try this
.wrapper {
overflow-x: hidden;
}
.outer {
position: absolute;
width: 2000px;
left: 50%;
bottom: 0;
margin-left: -1000px;
display: flex;
justify-content: center;
align-items: center;
}
.left__inner {
background: goldenrod;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
display: flex;
justify-content: flex-end;
}
.right__inner {
background: #222;
padding: 24px 48px;
flex: 1;
transform: skew(45deg);
}
.left__text,
.right__text {
transform: skew(-45deg);
span {
font-weight: 200;
font-size: 36px;
text-transform: uppercase;
}
}
.left__text {
color: #3c3c3c;
}
.right__text {
color: Goldenrod;
}
<div class="wrapper">
<div class="outer">
<div class="left__inner">
<div class="left__text">
<span> so skewy</span>
</div>
</div>
<div class="right__inner">
<div class="right__text">
<span>span much angle</span>
</div>
</div>
</div>
</div>
I would do it like this
this is just an example, not a ready-made solution ))
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: flex;
}
.container div {
width: 50%;
height: 200px;
position: relative;
}
.container .left:before {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: skewY(-1.5deg);
background: inherit;
}