I want to create a Flex Box Grid which displays elements in a row and wraps them when the maximum size is exceeded. I am able to create grid without overlaying flex box items.
https://jsfiddle.net/2ykn7jLs/1/
However, I want the small rectangles to overlay the big ones. They should be placed in the top left corner of the big rectangle. Whenever I use positioning such as absolute or relative it destroys the grid though. How would I overlay elements in a flex box grid?
Give position:relative to .input-color and add position:absolute in this class .input-color .color-box-small.
.grid {
display: flex;
flex-Direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.input-color .color-box-small {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
}
.input-color .color-box-large {
width: 290px;
height: 40px;
display: inline-block;
background-color: #ccc;
}
.input-color {
position: relative;
}
<div class="grid">
<div class="input-color">
<div class="color-box-small" style="background-color: orange;"></div>
<div class="color-box-large" style="background-color: green;"></div>
</div>
<div class="input-color">
<div class="color-box-small" style="background-color: white;"></div>
<div class="color-box-large" style="background-color: black;"></div>
</div>
<div class="input-color">
<div class="color-box-small" style="background-color: navy;"></div>
<div class="color-box-large" style="background-color: steelblue;"></div>
</div>
<div class="input-color">
<div class="color-box-small" style="background-color: orange;"></div>
<div class="color-box-large" style="background-color: green;"></div>
</div>
</div>
You need position here i believe:
update CSS to apply:
.input-color {
position: relative;
}
.input-color .color-box-small {
position: absolute;
top: 0;
left: 0;
}
https://jsfiddle.net/2ykn7jLs/3/
.grid {
display: flex;
flex-Direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.input-color {
position: relative;
}
.input-color .color-box-small {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
}
.input-color .color-box-large {
width: 290px;
height: 40px;
display: inline-block;
background-color: #ccc;
}
<div class="grid">
<div class="input-color">
<div class="color-box-small" style="background-color: orange;"></div>
<div class="color-box-large" style="background-color: green;"></div>
</div>
<div class="input-color">
<div class="color-box-small" style="background-color: white;"></div>
<div class="color-box-large" style="background-color: black;"></div>
</div>
<div class="input-color">
<div class="color-box-small" style="background-color: navy;"></div>
<div class="color-box-large" style="background-color: steelblue;"></div>
</div>
<div class="input-color">
<div class="color-box-small" style="background-color: orange;"></div>
<div class="color-box-large" style="background-color: green;"></div>
</div>
</div>
Related
I am trying to create inner borders with gaps. I tried to create borders by using :after pseudo elements, but :after elements are not visible.
.view {
display: flex;
flex-direction: column;
border: none;
overflow: hidden;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -5px -5px 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
background: yellow;
padding: 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.content:after{
content: '';
background: black;
position: absolute;
bottom: 5px;
width: 2px;
height: 20px;
right: -10px;
}
.head {
text-align: center;
}
<div class="view">
<div class="container">
<div class="content">
<div class="val">0</div>
<div class="head">Total balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Available balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Orders</div>
</div>
<div class="content">
<div class="val">500</div>
<div class="head">Wallet balance</div>
</div>
<div class="content">
<button class="val" type="button">Send</button>
</div>
</div>
</div>
I am trying to achieve this result:
There are possibly better ways of doing this. But this is done without changing your HTML layout.
.view {
display: flex;
flex-direction: column;
border: none;
overflow: hidden;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -5px 0 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
background: yellow;
padding: 20px;
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
}
.content:before {
content: "";
position: absolute;
bottom: 0;
left: -5px;
right: -5px;
background: yellow;
z-index: 1111;
border: 4px solid yellow;
}
.content:after {
content: "";
position: absolute;
top: 0;
left: -5px;
right: -5px;
background: yellow;
z-index: 1111;
border: 4px solid yellow;
}
.head {
text-align: center;
}
<div class="view">
<div class="container">
<div class="content">
<div class="val">0</div>
<div class="head">Total balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Available balance</div>
</div>
<div class="content">
<div class="val">0</div>
<div class="head">Orders</div>
</div>
<div class="content">
<div class="val">500</div>
<div class="head">Wallet balance</div>
</div>
<div class="content">
<button class="val" type="button">Send</button>
</div>
</div>
</div>
I hope this helps
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
}
.view {
background-color: yellow;
}
.topContainer {
display: grid;
grid-template-columns: repeat(3, 3fr);
border-bottom: 1px solid #000;
}
.bottomContainer {
display: grid;
grid-template-columns: repeat(2, 3fr);
}
.content {
padding: 25px;
text-align: center;
border-left: 1px solid #000;
}
.topContainer .content:first-child {
border: none;
}
.bottomContainer .content:first-child {
border: none;
}
</style>
</head>
<body>
<div class="view">
<div class="topContainer">
<div class="content center">
<div>
<div class="val">0</div>
<div class="head">Total balance</div>
</div>
</div>
<div class="content center">
<div>
<div class="val">0</div>
<div class="head">Available balance</div>
</div>
</div>
<div class="content center">
<div>
<div class="val">0</div>
<div class="head">Orders</div>
</div>
</div>
</div>
<div class="bottomContainer">
<div class="content center">
<div>
<div class="val">500</div>
<div class="head">Wallet balance</div>
</div>
</div>
<div class="content center">
<button class="val" type="button">Send</button>
</div>
</div>
</div>
</body>
</html>
Result
I have a dummy screen with background image. The background image correctly expands or contracts with the size of the viewport. I have dummy flexbox content that I intentionally make overflow the bottom of the page.
The scrollbar correctly appears, but it will not scroll far enough to show all the content that overflowed.
Apologies: the content is varied so I can tell what IS NOT showing.
Dummy header menu bar is fine.. it is supposed to scroll up - and it does.
CSS:
html {
box-sizing: border-box;
}
body {
box-sizing: border-box;
overflow-y: auto;
min-height: 100vh;
width: 100%;
margin: 0; padding: 0; border: 0; cursor: default
}
ul {
list-style: none;
li {
display: inline;
margin-left: 50px;
margin-top: 50px;
}
}
.blockStyleEven {
display: flex;
flex-direction: row;
color: white;
justify-content: space-evenly;
}
.blockSpaceAround {
display: flex;
flex-direction: row;
color: white;
justify-content: space-around;
}
.blockSpaceBetween {
display: flex;
flex-direction: row;
color: white;
justify-content: space-between;
}
.blockStart {
display: flex;
flex-direction: row;
color: white;
justify-content: flex-start;
}
.blockEnd {
display: flex;
flex-direction: row;
color: white;
justify-content: flex-end;
}
.blockCenter {
display: flex;
flex-direction: row;
color: white;
justify-content: center;
}
.maroon {
width: 100px;
height: 100px;
background-color: maroon;
}
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
.blue {
width: 100px;
height: 100px;
background-color: blue;
}
.workspace {
background: url("././Features.jpg") no-repeat center center fixed;
background-size: cover;
height: 100vh;
width: 100vw;
overflow: hidden;
h1 {
color: #E0B228;
}
h2 {
color: #2856E0;
}
}
HTML:
<div [ngStyle]="{'width': '100vw', 'height': '100vh'}">
<div [ngStyle]="{'display': 'flex', 'flex-direction': 'column'}">
<div [ngStyle]="{'background-color': 'beige'}">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="workspace">
<div class="blockStyleEven">
<div class="maroon">space-evenly</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockSpaceAround">
<div class="maroon">space-around</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockSpaceBetween">
<div class="maroon">space-between</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockStart">
<div class="maroon">start</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockEnd">
<div class="maroon">end</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockCenter">
<div class="maroon">center</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockStyleEven">
<div class="maroon">space-evenly</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockSpaceAround">
<div class="maroon">space-around</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockSpaceBetween">
<div class="maroon">space-between</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockStart">
<div class="maroon">start</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockEnd">
<div class="maroon">end</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
<div class="blockCenter">
<div class="maroon">center</div>
<div class="red">RED</div>
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
</div>
</div>
</div>
</div>
Thanks in advance.
Yogi
Finally figured it out. The problem was the scrollbar was "too short" to show all the content. This was because my workspace class was on a div below the dummy menu bar. When I put the workspace (containing Margin: auto) on the outer move div, it worked perfectly.
Thanks for all your help.
Apologies for the earlier poor formatting, which has now been cleaned up.
Yogi
position absolute left or right does not show the .box background color in Internet Explorer 11 (IE11) at the same time all the other browsers are working fine (Please find attached screenshots)
Unfortunately I can't put the width. because the number of images may vary
Demo: https://codepen.io/anon/pen/qVLyaM
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
display: block;
padding: 1rem;
border: 1px solid black;
background-color: deepskyblue;
width: 700px;
height: 300px;
position: relative;
}
.box {
display: inline-flex;
background-color: tomato;
padding: 1rem;
position: absolute;
left: 0;
left: 100%;
bottom: 100%;
}
<div class="wrap">
<div class="box">
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
<div class="box-img"><img src="http://via.placeholder.com/100x100?text=Logo 01"></div>
</div>
</div>
I would like to add flight duration in the middle-left of each blue line. I was trying to do following tricks, but unfortunately doesn't work.
This is how to looks like at the moment:
CodePen example
HTML:
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
</div>
</span>
LESS:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration{
margin:auto auto auto 0;
}
This is one of my favorite tricks:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Applied to your specific example:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
position: relative;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Just messing around, centering the text horizontally too */
white-space: nowrap;
background: rgba(255, 255, 255, .75);
width: 81px;
left: -38px;
text-align: center;
}
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
</div>
</span>
Source
Assuimg it's the '1-30h' text you're wanting to move:
Try positioning your .flight-duration class with this:
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin:20px 0px 0px -40px;
}
The -40px is affecting the left-hand margin, the lower the number the further left your text will sit. Higher numbers will cause the text to sit on the right of the blue line.
Here you go, add this to your code :)
.flight-path {
position: relative;
}
.flight-duration{
display: block;
position: absolute;
right: 6px;
width: 46px;
text-align: center;
top: 50%;
transform: translateY(-50%)
}
I forked your codepen, to show a new demo
http://codepen.io/antraxis/pen/jbPpQY?editors=110
I am trying to align flight duration time just in the middle of each flight path (blue line). But it doesn't work, duration (1:30) is not exactly in the middle of the line and text is not centred. How can I fix that?
CodePen code example
HTML:
<span class="col-md-12 roundtrip">
<div class="col-md-6 trip">Outbound
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Chicago</div>
<div class="connection">5hr wait</div>
<div class="flight">Chicago</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">New York</div>
<div class="connection">2hr wait</div>
<div class="flight">New York</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
<div class="col-md-6 trip">Inbound
<div class="flight">Amsterdam</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Los Angeles</div>
<div class="flight">Los Angeles</div>
<div class="flight-path">
<div class="flight-duration">1-30h</div>
</div>
<div class="flight">Amsterdam</div>
</div>
</span>
LESS:
.roundtrip {
display: inline-flex;
flex-direction: row;
align-items: stretch;
}
.trip {
width: 100px;
text-align: center;
border: 1px solid black;
margin: 0px 3px;
display: flex;
flex-direction: column;
margin-right: 50%;
}
.flight {
white-space: nowrap;
}
.flight-path {
width: 6px;
min-height: 85px;
flex-grow: 1;
align-self: center;
background-color: #6090FF;
position: relative;
}
.connection {
height: 40px;
color: red;
border: 1px solid red;
display: flex;
flex-direction: column;
justify-content: center;
}
.flight-duration {
position: absolute;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
background: rgba(255, 255, 255, .75);
width: 81px;
left: -38px;
text-align: center;
}
It seems like every time I want to align something vertically I go back to this link:
https://css-tricks.com/centering-css-complete-guide/
I like the way the use cases are organized.
You could try a table layout. Does this help?
.line {
width: 5px;
height: 200px;
display: table;
table-layout: fixed;
text-align: center;
}
.time {
display: table-cell;
vertical-align: middle;
background: #777;
height: 10px;
text-align: center;
}
span {
background: #ccc;
padding: 10px 0px;
}
<div class="line">
<div class="time">
<span>12:34pm</span>
</div>
</div>