I have a poup with input fields inside. When I use iPhone or iPad to click on any input field the layout jumps... you can see this effect in this link: https://jsbin.com/zebixifami/1
Try to tap the input fields at the bottom of the popup you will see the jerk, This jerk is much more prominent in actuall product.
Here is the editor bin url: https://jsbin.com/zebixifami/edit?html,css,output
Here is a link to the video showing this issue: https://www.youtube.com/watch?v=LvmAl-HQI8Y&feature=youtu.be
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
</div>
<div class="popup">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
CSS:
.popup {
position: fixed;
top: 50%;
left: 5%;
width: 90%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
max-height: 90%;
background: #fff;
overflow: auto
}
input {
width: 90%;
margin-left: 5%;
display: block;
margin-bottom: 20px;
margin-top: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #000;
oveflow: hidden;
}
It turns out this is a webkit bug & there is not much we can do about it.
However I did found a work around that I find acceptable.
I ended up keeping popup as a normal document flow div without absolute or fixed position while jumping between layout and popup in a way that users gets the same feel as if they are inside a popup, below is the step by step instruction of what I did:
When popup is triggered, save the current scroll position of layout jQuery('body').scrollTop().
Animate entire page out opacity: 0 (The entire layout is in one div and popup is outside of it).
Set layout height to 0 with overflow hidden.
Animate in the popup (the popup will be position static or relative)
Depnding on where the user is we have to jump to top of the page before revealing popup.
Now when closing the popup do the opposite.
Animate out the popup
Set layout height to auto
Scroll the layout back to previous position that we saved earlier.
Now we can animate layout back to opacity: 1.
This kind of step by step transition will make the users feel it's a popup but we are simply hiding layout and showing another div which resembles a popup.
Doing this means our popup is no longer position fixed & the bug wont trigger.
Demo: JSBIN & Editor
Below is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<section>
<h1>A</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
Click me.
</section>
<section>
<h1>B</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
Click me.
</section>
<section>
<h1>C</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
Click me.
</section>
<section>
<h1>D</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et ea officiis ipsam sunt, nam quam sint omnis, quisquam cum. Dignissimos pariatur porro quis sunt optio laborum, sint vero fugit unde?</p>
Click me.
</section>
</div>
<div class="popup-wrap"></div>
<div class="popup">
Close
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>
</html>
CSS:
body{
background: #000;
padding: 0;
margin: 0;
}
.wrapper{
background: #fff;
margin: 0;
padding: 20px;
}
.popup {
position: relative;
top: -5%;
opacity: 0;
left: 5%;
width: 90%;
max-height: 90%;
background: #fff;
overflow: auto;
display: none;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
input {
width: 90%;
margin-left: 5%;
display: block;
margin-bottom: 20px;
margin-top: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.popup-wrap{
position: absolute;
background: rgba(0,0,0,0.75);
top: 0;
left: 0;
}
.popup-on body {
oveflow: hidden;
}
.popup-on .popup{
display: block;
}
.popup-on .wrapper{
overflow: hidden;
}
.popup-animate .popup{
top: 5%;
opacity: 1;
}
JS:
$(document).ready(function(){
var currentScrollPosition = 0;
// Open Popup
$('.js-popup-open').click(function(e){
e.preventDefault();
// Save current popup location.
currentScrollPosition = jQuery('body').scrollTop();
// Fadeout layout
$('.wrapper').animate({
opacity: 0
}, 350, function () {
// Hide layout
$('.wrapper').css('height', 0);
// Show Popup
$('body').addClass('popup-on');
// Scroll layout to top so popup is not shown half way through.
jQuery('html, body').animate({
scrollTop: 0
}, 0);
// Animate Popup
setTimeout(function(){
$('body').addClass('popup-animate');
}, 10); /* this set timeout let transition be applied even when display property was changed from display none to blcok */
});
});
// Close Poup
$('.js-popup-close').click(function(e){
e.preventDefault();
// Animate out the poup
$('body').removeClass('popup-animate');
// Wait while popup is animting to fade.
setTimeout(function(){
// Hide the popup
$('body').removeClass('popup-on');
// scroll to previous position.
jQuery('html, body').animate({
scrollTop: currentScrollPosition
}, 0);
// Layout back to normal height.
$('.wrapper').css('height', 'auto');
setTimeout(function(){
$('.wrapper').animate({
opacity: 1
}, 350);
}, 10);
}, 360);
});
});
seems like the position fixed makes the problem here because on iphone and ipad the browser focuses the input field when you click/tap on it (so thebrowser self makks an animation).
Try to do this:
<div class="backdrop">
<div class="popup">
<input type="text">
...
</div>
</div>
and use this css for the backdrop:
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
and in your popup css property just change position:fixed to position:absolute.
.popup {
position: absolute;
...
}
I hope this could fix the issue.
Related
Left side there is a menu, right side the content.
A flex box is used. Why menu scroll, if I scroll in right side? Why it is not keep fixed? How can I fix it?
CSS is inline in React.js.
const DashboardLayout = ({ children }: Props) => {
const isDesktop = useMediaQuery('(min-width: 575px)')
return (
<Layout isNavbarTransparent={false}>
<section className={`section-base`}>
<div style={{ display: 'flex' }}>
{isDesktop ? (
<>
<div style={{ flexBasis: '350px' }}>
<DashboardSidebar embeddedIn={'dashboard'} />
</div>
<div>{children}</div>
</>
) : (
<div>{children}</div>
)}
</div>
</section>
</Layout>
)
}
I tried to set this for right content:
overflow: hidden;
height: 100px;
Did not help.
You can use position: sticky; to make it work. Attached a working example (no React but the concept is there). See this for further information.
Note: There may be various solution to this depending what you want to get, this answer was made with the context you provide. Hope it helps!
.top-bar {
width: 100%;
height: 40px;
background-color: black;
}
.dashboard {
display: flex;
width: 100%;
}
.menu {
width: 30%;
margin: 20px;
}
.sticky-container {
position: sticky;
top: 0; /* set top for sticky to work */
padding-top: 10px;
}
.content {
width: 70%;
}
<div>
<div class="top-bar"></div>
<div class="dashboard">
<div class="menu">
<div class="sticky-container">
<li>Options</li>
<li>Options</li>
<li>Options</li>
<li>Options</li>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia laborum ab ducimus, consequatur itaque modi dolores dolorem optio assumenda ad doloribus eveniet voluptas, asperiores maiores deleniti, cupiditate dolor necessitatibus aliquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad maxime beatae quod ea excepturi libero reprehenderit. Animi, voluptates? Obcaecati illum quis asperiores molestias, autem dolorum. Sapiente quis voluptate voluptatibus ipsa?</p>
</div>
</div>
</div>
Solution:
overflow: scroll;
height: calc(100vh - 64px);
In CSS, I use the backdrop-filter property to blur the background of the sticky header.
Therefore, I used backdrop-filer:blur(10px) and set opacity:50%.
If you run the code, the sticky header background will not blur. Can you tell me why the sample code doesn't work?
.sticky{
background-color:orangered;
opacity: 50%;
backdrop-filter: blur(10px);
position: sticky;
top:0;
height: 100px;
}
<body>
<div class="sticky">
<h1>This is a header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
</body>
Chrome does support backdrop-filter. https://caniuse.com/?search=backdrop-filter.
backdrop-filter does not work in conjunction with background-color.
You cannot see a blur effect if there is no background to blur. A blurred solid colour would look exactly the same!
I recommend also removing opacity.
If you want to change the background color, try using:
backdrop-filter: sepia(.8);
backdrop-filter: hue-rotate(30deg);
to get the desired efffect.
body {
background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages8.alphacoders.com%2F992%2F992848.jpg);
background-size: contain;
}
#supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.sticky {
backdrop-filter: blur(10px);
position: sticky;
top: 0;
height: 100px;
}
}
<body>
<div class="sticky">
<h1>This is a header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat tempora.
</p>
<div style="height: 400px"></div>
</body>
Try directly state opacity using RGBA in the background-color, it will work:
.sticky{
background-color:rgba(255,69,0,0.5); //orangered = rgb(255,69,0)
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); //mobile-friendly
position: sticky;
top:0;
height: 100px;
}
<body>
<div class="sticky">
<h1>This is a header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
asperiores at autem, dicta dignissimos ex, fugiat fugit harum id itaque
nulla odio perferendis quasi qui similique! Doloribus nesciunt quaerat
tempora.
</p>
<div style="height: 400px"></div>
</body>
background-filter does not work in conjunction with background-color.
.sticky{
background-color:#3ea66263;
backdrop-filter: blur(10px);
position: sticky;
top:0;
height: 100px;
}
Works well for me. Did I miss something ?
I am trying to figure out how to make a large div centered on all screens, but also be scrollable for smaller screens that otherwise couldn't see all of the div.
For example, let's say the div has the size of 1200px x 600px. Using the following will center the div, but not allow scrolling on smaller screen sizes:
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
My goal is to find a way to allow these smaller computer screens to see the entirety of the large div (via scrolling) but still have the div be centered on screens of all sizes.
Is this possible? In addition, is there a non-javascript solution?
I hope it will solve your problem.
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
height: auto;
padding: 20px;
background: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
</head>
<body>
<div class="main-wrapper">
<div class="internal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, perspiciatis. Assumenda cupiditate culpa obcaecati molestias architecto facilis! Ratione laboriosam reprehenderit asperiores et ipsum est, quisquam modi beatae odio enim nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet libero nam nulla assumenda optio iure adipisci, exercitationem deserunt a. Similique illum cumque eveniet quam enim in provident expedita culpa officia! Lorem ipsum dolor sit amet consectetur adipisicing, elit. Cupiditate ipsam et, nostrum. Dolorum autem qui voluptas doloribus voluptatibus est laboriosam perferendis blanditiis et quaerat iusto, vitae unde itaque dolore nulla.. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem recusandae, repellat velit rerum. Repellendus harum, sequi architecto deleniti tenetur cumque, ducimus itaque, nam officia vero minima quos, debitis quis sunt. Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Architecto, quaerat, illum. Aperiam, repellendus sit atque architecto cupiditate. Quis consequuntur, iure nihil doloremque, aut distinctio quibusdam rem, mollitia incidunt, voluptate quasi?
</div>
</div>
</body>
</html>
I need a create 4 cards with non-changable height with buttons on the bottom, but there are different text amount in each card.
Position Fixed is connected to body element,
position absolute scrolls with content,
position sticky appears when content ends.
https://codepen.io/anatoli101/pen/NVzbGY Here is a basic exemple of my problem
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
background-color: red;
height: 400px;
width: 300px;
overflow-y: auto;
}
.button{
position:sticky;
bottom:0;
background-color: grey;
width: 100%;
height: 30px;
}
You'll get a much nicer result (no occluded scrollbars) using flex:
.content {
display: flex;
justify-content: space-evenly;
height: 400px;
}
.container {
display: flex;
flex-direction: column;
flex: 0 1 250px;
margin: 0 5px;
}
.fixed-div {
background-color: red;
overflow-y: auto;
flex: 1 1 auto;
}
.button {
background-color: grey;
flex: 0 0 30px;
}
<h1>I need grey area fixed on the bottom, not dependent on text amount</h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est </p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
</div>
A good way to achieve this is by wrapping the element with the class fixed-div inside a container, and moving the element with the class button outside of the element with the class fixed-div, so that it is the direct child of the container element. Then you can set position: relative to the container element, and position: absolute to the element with the class button. As the container element will have the exact same size (and especially the same height) as the element with the class fixed-div, the element with the class button will be positioned at its bottom.
You also will need to add a bottom padding to the element with the class fixed-div so that the button doesn't not hide its content, and so that it doesn't affect its defined height, you can set its box-sizing property to border-box.
See the following code:
.content {
display: flex;
width: 100%;
justify-content: space-around;
}
.container {
position: relative;
}
.fixed-div {
box-sizing: border-box;
width: 150px;
height: 400px;
padding-bottom: 30px;
overflow-y: auto;
background-color: red;
}
.button {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: grey;
}
<h1>I need grey area fixed on the bottom, non depending of text amount </h1>
<div class="content">
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum.</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae?</p>
</div>
<div class="button"></div>
</div>
<div class="container">
<div class="fixed-div">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dolores aspernatur error rem aliquam omnis eveniet consequuntur asperiores, aut explicabo eaque eos quos facere necessitatibus sit est ipsam quae optio!loremLorem ipsum dolor sit amet consectetur adipisicing elit. Itaque molestias natus officiis labore omnis corporis cupiditate quisquam nihil? Mollitia aperiam iusto iste minima ratione culpa veniam architecto facilis neque deleniti?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque aut, eum, quia facere inventore perferendis aperiam recusandae nihil at aliquam ipsum excepturi eligendi animi, nam vel unde. Suscipit, tenetur veritatis.Lore Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quam. Hic unde nam dolor debitis voluptates officia earum, nostrum ut quae recusandae voluptate eveniet commodi ipsa dolorum nulla totam molestiae? </p>
</div>
<div class="button"></div>
</div>
</div>
I reduced the width of the text elements so that it works within a narrow container, you can run the code in full page if it is still too narrow.
Leaving the button inside the scrolling element and setting position: relative to the latter and position: absolute to the former wouldn't work as the bottom of the button would be positioned inside the scrolling element at 400px which is the height of the scrolling element, and would scroll with its content.
Hope that helps.
You can try code:
.fixed-div p{
display: block;
margin: 0;
padding: 10px;
height: 350px;
}
This is a demo: https://codepen.io/phuongnm153/pen/zQaobq
use position: relative; for the parent (fixed-div) and position:absolute;bottom:0; for the child (button)
.content{
display:flex;
width: 100%;
justify-content: space-around;
}
.fixed-div{
position: relative;
background-color: green;
height: 400px;
width: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.button{
position:relative;
background-color: grey;
width: 100%;
height: 30px;
display: inline-table;
}
I have tried to run the attached codepen by creating a single html file that contains all the style etc.
It works fine on Chrome but does not show the "grid__description" as it is supposed to when the user clicks on the "grid_item".
Here is my source code and I have in-lined the css on this file.
Please can anyone help me understand how to get this to work on Safari?
Here is the link to the codepen:
https://codepen.io/javiervd/pen/MEajJx
All works great there!
* {
box-sizing: border-box;
}
.grid__item {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #aaa;
min-height: 150px;
font-size: 5em;
color: inherit;
text-decoration: none;
background: #ddd;
&:focus+.grid__description {
max-height: 200px;
transition: max-height 0.4s ease-in;
}
}
.grid__description {
max-height: 0;
overflow: hidden;
background: #aaa;
transition: max-height 0.15s ease-in;
div {
padding: 2em;
box-shadow: inset 0 0 2px #000;
}
}
#media screen and (min-width: 30em) {
.grid {
display: grid;
grid-template-areas: "item item item" "desc desc desc";
grid-template-columns: 1fr 1fr 1fr;
}
.grid__description {
grid-area: desc;
}
}
<div class="grid">
1
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores quos laudantium harum ea minus magnam hic ut tempore. Ipsam doloribus perferendis architecto magnam, exercitationem blanditiis corrupti totam ut praesentium</div>
</div>
2
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis dolores deserunt alias a earum, expedita ipsam ea tempora voluptatibus. Debitis modi tempore, totam doloribus sapiente qui quaerat eum fugit magni!</div>
</div>
3
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit magni similique esse, ipsum sapiente voluptate nihil nisi omnis nulla non consequatur veritatis voluptas sit cum sequi eaque, architecto, mollitia dolore.</div>
</div>
</div>
<div class="grid">
4
<div class="grid__description">
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, dolorem! Esse earum quis neque soluta, id fugiat magni consequatur placeat praesentium illum a sit ex dolore nisi ipsa similique deserunt!</div>
</div>
5
<div class="grid__description">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nulla voluptatibus eos quia sequi totam reprehenderit in cupiditate deserunt facere temporibus libero ut doloremque reiciendis ab commodi quibusdam consequatur corporis?</div>
</div>
6
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste laborum atque numquam distinctio illum deleniti architecto voluptas modi, repellat non! Itaque numquam architecto pariatur impedit, tempora ab eius sint incidunt.</div>
</div>
</div>
On Safari you need to add the tabindex attribute to the elements you want to focus. I added those to your html for example:
<div class="grid">
<a tabindex="0" href="#" class="grid__item">1</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet dolores quos laudantium harum ea minus magnam hic ut tempore. Ipsam doloribus perferendis architecto magnam, exercitationem blanditiis corrupti totam ut praesentium</div>
</div>
<a tabindex="0" href="#" class="grid__item">2</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis dolores deserunt alias a earum, expedita ipsam ea tempora voluptatibus. Debitis modi tempore, totam doloribus sapiente qui quaerat eum fugit magni!</div>
</div>
<a tabindex="0" href="#" class="grid__item">3</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit magni similique esse, ipsum sapiente voluptate nihil nisi omnis nulla non consequatur veritatis voluptas sit cum sequi eaque, architecto, mollitia dolore.</div>
</div>
</div>
<div class="grid">
<a tabindex="0" href="#" class="grid__item">4</a>
<div class="grid__description">
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut, dolorem! Esse earum quis neque soluta, id fugiat magni consequatur placeat praesentium illum a sit ex dolore nisi ipsa similique deserunt!</div>
</div>
<a tabindex="0" href="#" class="grid__item">5</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nulla voluptatibus eos quia sequi totam reprehenderit in cupiditate deserunt facere temporibus libero ut doloremque reiciendis ab commodi quibusdam consequatur corporis?</div>
</div>
<a tabindex="0" href="#" class="grid__item">6</a>
<div class="grid__description">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste laborum atque numquam distinctio illum deleniti architecto voluptas modi, repellat non! Itaque numquam architecto pariatur impedit, tempora ab eius sint incidunt.</div>
</div>
</div>