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>
Related
I have a wrapper div.container inside are div.children. I am setting position:sticky on the first child. I works fine on direction:ltr, however on direction:rtl sticky don't work.
I'm not sure if this is a browser bug or my styles are just wrong. Please note that I don't have access to the html itself, I can only change the css file and no js as possible.
Tested on:
Firefox - Pass ✅
Google Chrome - Fail ❌
Safari - Fail ❌
.container {
margin: 10px;
padding: 0;
border: 1px solid #000;
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
position: relative;
white-space: nowrap;
}
.container.ltr { direction: ltr; }
.container.rtl { direction: rtl; }
.children {
display: inline-block;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
border: 1px solid rgba(0,0,0,0.08);
}
.children.sticky {
position: sticky;
background: #f30;
color: #fff;
}
.container.ltr .children.sticky { left: 0; }
.container.rtl .children.sticky { right: 0; }
<div class="container ltr">
<div class="children sticky">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
<div class="children">8</div>
<div class="children">9</div>
<div class="children">10</div>
</div>
<div class="container rtl">
<div class="children sticky">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
<div class="children">8</div>
<div class="children">9</div>
<div class="children">10</div>
</div>
Chromium Bug Report
https://bugs.chromium.org/p/chromium/issues/detail?id=1140374
I bumped into this same issue.
Managed to find a workaround by using an extra container div, which seems to work fine on Chrome (v93), but still fails in Safari (v14.1.2), somehow it moves the sticky element to the left (???)
.container {
margin: 10px;
border: 1px solid #000;
overflow: auto;
width: 500px;
white-space: nowrap;
}
.container.ltr {
direction: ltr;
}
.container.rtl {
direction: rtl;
}
.inner {
display: inline-block;
}
.children {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid rgba(0,0,0,0.08);
}
.children.sticky {
position: sticky;
background: #f30;
color: #fff;
}
.container.ltr .children.sticky {
left: 0;
}
.container.rtl .children.sticky {
right: 0;
}
<div class="container ltr">
<div class="children sticky">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
<div class="children">8</div>
<div class="children">9</div>
<div class="children">10</div>
</div>
<div class="container rtl">
<div class="inner">
<div class="children sticky">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
<div class="children">8</div>
<div class="children">9</div>
<div class="children">10</div>
</div>
</div>
In my real use case there are more sticky elements (like the text in each children box), which are working somehow in Safari as well, but could not replicate that with a simple example. I also have a sticky sidebar, which has the same behavior as in the example above.
position: sticky
has got certain set of limitations in it's behaviour, please refer to https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
Please check if position: fixed serves your purpose.
.container {
margin: 10px;
padding: 0;
border: 1px solid #000;
overflow-x: scroll;
overflow-y: hidden;
width: 500px;
position: relative;
white-space: nowrap;
}
.container.ltr { direction: ltr; }
.container.rtl { direction: rtl; }
.children {
display: inline-block;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
border: 1px solid rgba(0,0,0,0.08);
}
.container.ltr .children:nth-child(2){
margin-left: 102px;
}
.container.rtl .children:nth-child(2){
margin-right: 102px;
}
.children.sticky {
/* position: sticky; */
position :fixed;
background: #f30;
color: #fff;
}
/*.container.ltr .children.sticky { left: 0; }
.container.rtl .children.sticky { right: 0; } */
<div class="container ltr">
<div class="children sticky">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
<div class="children">8</div>
<div class="children">9</div>
<div class="children">10</div>
</div>
<div class="container rtl">
<div class="children sticky">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
<div class="children">5</div>
<div class="children">6</div>
<div class="children">7</div>
<div class="children">8</div>
<div class="children">9</div>
<div class="children">10</div>
</div>
am also having the same issue but with table scroll with a sticky header above it & so as a temp solution for now, we can us a bit of js to reset the scroll to start from the right as expected.
so lets say we have a div that have a scrollable table and a header that should be sticky when we scroll right/left
<div class="scrollable" data-scroll-reset>
<div class="sticky">
this should remain still no matter how we scroll to left/right
</div>
<table class="rtl">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
<style>
.scrollable {
overflow-x: scroll;
}
.sticky {
left: 0;
right: 0;
z-index: 1;
position: sticky;
}
.rtl {
direction: rtl;
}
</style>
<script>
window.addEventListener('load', () => {
document.querySelectorAll('[data-scroll-reset]').forEach((e) => {
e.scrollLeft = 10000
})
})
</script>
both data-scroll-reset & rtl should be added on condition, otherwise it will mess the scrolling when the direction is changed to ltr.
I have a strange requirement for a web application (single page web app) in which the page shouldn't have a scrollbar. The header & footer stays sticky & the middle content part should adjust(keeping proportion) without scrollbar in any resolution. Following is a preview of the layout.
Live Demo - https://previewin.xyz/web/sree/layout/
CodePen Demo - https://codepen.io/DeCodeUI/pen/gZBXqa
CSS
header {
position: fixed;
width: 100%;
height: 50px;
background: #333;
z-index: 500;
left: 0;
top: 0;
}
footer {
position: fixed;
width: 100%;
height: 50px;
background: #333;
z-index: 500;
left: 0;
bottom: 0;
}
#content {
width: 80%;
height: 100vh;
padding: 60px 15px;
}
#grid {
max-width: 900px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: space-around;
}
.grid-item {
width: 300px;
height: 100px;
background: blue;
}
HTML Sample
<div id="page">
<header>Text</header>
<div id="content">
<div id="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
<footer>Text</footer>
</div>
Those 9 grids in blue, always keep proportion in any resolution & no scrollbars. I have tried my best & the result is here - https://previewin.xyz/web/sree/layout/ but when the screen get smaller, the grids won't resize. Any ideas to solve this?
Just change the container width:100% and set max-width:1160px based on your requirement in your code. If you set width for container responsive and browser resize become problem. I hope this solution will work for you.
.container {
max-width: 1160px;
width: 100%;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: #333;
z-index: 500;
left:0;
top: 0;
}
footer {
position: fixed;
width: 100%;
height: 50px;
background: #333;
z-index: 500;
left:0;
bottom: 0;
}
#content {
width: 80%;
height: 100vh;
padding: 60px 15px;
}
#grid {
max-width: 900px;
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 150px;
height: 100px;
background: blue;
margin: 10px;
padding:30px;
color:#fff;
text-align:center;
align-self: center;
}
<div id="page">
<div class="container">
<header>Text</header>
<div id="content">
<div id="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
<footer>Text</footer>
</div>
</div>
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>
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>