I am using Chrome and Safari, in neither of them the attribute shape-outside seems to work. I've put both the -webkit and the normal version.
.circle {
background-color: #f3a57b;
border-radius: 50%;
width: 150px;
height: 150px;
-webkit-shape-outside: circle(50%);
float: left;
}
.text {
float: left;
width: 500px;
}
<div class="circle"></div>
<p class="text">Some Text Here</p>
I want to get the text to adapt to the circle like this:http://codepen.io/adobe/pen/Cnvuf
If you remove float:left from .text, you'll see that it works:
.circle {
background-color: #f3a57b;
border-radius: 50%;
width: 150px;
height: 150px;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
float: left;
}
<div>
<div class="circle"></div>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit Neque porro quisquam est qui dolorem</p>
</div>
JSFiddle
As for Firefox and IE, it's not supported (Note: Safari version 8.0).
As you can see here, Safari doesn't support this feature. And chrome only support it with the 'experimental Web Platform features' enabled.
And I think you can enable this only with Chrome canary.
Related
I'm new in css
I create two columns using flexbox, so I want to divide them 50% and 50%.
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
color: #383838;
border-right: 1px solid gray;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
color: #0e4f1f;
text-align: center;
}
#about-us{
display: flex;
}
.about-us__slogan{
margin:6em 0 0 2em;
text-align: center;
}
.about-us__business{
flex:50%;
}
.about-us__business__title{
color:#0e4f1f;
margin: 2em 0 0 2em;
}
.about-us__business__info{
text-align:left;
}
<section id="about-us">
<p class="about-us__slogan"><blockquote>
“Neque porro quisquam est qui dolorem <br/>
Neque porro quisquam est qui dolorem<br/>
Neque porro quisquam est qui dolorem<br/>
Neque porro quisquam est qui dolorem.</p>
</blockquote>
<div class="about-us__business">
<h1 class="about-us__business__title">Neque porro quisquam est qui dolorem</h1>
<p class="about-us__business__info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
porro.</p>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
pNeque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
</div>
</section>
As you can see it's not 50% and 50%, I try using flex:50%. in .about-us__slogan class but it no work, it just create big space at the left.
I think it's not that dimensions because size wrap to the content, how can I fix that? Regards
Your child divs about-us__slogan & about-us__business both needed to be flex:1 so they are equal in size to each other with their parent div about-us with display: flex.
Some of your nesting had also got a little messed up in your example code above so I have tidied it a little for you also.
Try this:
.about-us {
display: flex;
}
.about-us__slogan {
flex: 1;
margin: auto 1rem;
border-right: 1px solid gray;
}
.about-us__blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
color: #383838;
text-align: center;
margin: 0;
}
.about-us__blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
color: #0e4f1f;
}
.about-us__business {
flex: 1;
margin: auto 1rem;
}
.about-us__business-title {
color: #0e4f1f;
}
.about-us__business-info {
/* Add styles you would like to use if any */
}
<section class="about-us">
<div class="about-us__slogan">
<blockquote class="about-us__blockquote">
<p class="about-us__slogan-text">
Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem Neque porro quisquam est qui dolorem.</p>
</blockquote>
</div>
<div class="about-us__business">
<h1 class="about-us__business-title">Neque porro quisquam est qui dolorem</h1>
<p class="about-us__business-info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. porro.</p>
<p class="about-us__business-info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet Neque porro quisquam est qui dolorem ipsum quia dolor sit amet Neque porro quisquam est qui dolorem ipsum quia dolor sit amet Neque porro quisquam est qui dolorem ipsum quia dolor sit
amet pNeque porro quisquam est qui dolorem ipsum quia dolor sit amet.</p>
</div>
</section>
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>
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.
What I’m trying to do is dynamically match the total heights of all three columns, which all have a dynamic amount of content possible. Each column can have a dynamic amount of content, giving them dynamic heights. Here's the layout I'm trying to achieve:
And here's some basic html/css: https://jsfiddle.net/fmpeyton/f1t2jhkt/
HTML:
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga, dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding-right: 30px;
float: left;
}
.box {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
background-color: #eee;
}
h4 { margin-top: 0; }
Without JS or flexbox, I'm not sure this is even possible with dynamic content. Any ideas?
Without flexbox or JS you are pretty much limited to wrapping the columns in a parent div and using CSS Tables.
.parent {
display: table;
table-layout: fixed;
}
.column {
display: table-cell;
width: 33.33%;
padding: 0 15px;
border: 1px solid grey;
}
JSFiddle
* {
box-sizing: border-box;
}
.parent {
display: table;
table-layout: fixed;
}
.column {
display: table-cell;
width: 33.33%;
padding: 0 15px;
background: pink;
border: 1px solid grey;
}
.box {
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px;
background-color: #eee;
}
h4 {
margin-top: 0;
}
<div class="parent">
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
laboriosam!
</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates
dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga,
dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse
accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
</div>
</div>
<div class="column">
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
laboriosam!
</p>
</div>
<div class="box">
<h4>Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
</div>
</div>
</div>