I have a website that includes a slider that transitions between paragraphs.
How can I adjust the height of my slider so it dynamically changes , depending on how much content is within the corresponding paragraph.
As of now, no matter how much content is within a paragraph, my slider still pushes everything down , regardless of height.
Thank you in advance for the help.
Codepen
<div class = "main_body">
<div class = "grid-x align-centered">
<div class = "cell large-12 main_content">
<div id="slider-wrapper">
<!-- slider controls -->
<div class="slider-controlls">
<button class="next">></button>
<button class="prev"><</button>
</div>
<!-- slider items -->
<div class="slider-items">
<div class = "slider-item">
<div class="content">
<div class = "title">
<h3>Our Mission</h3>
</div>
<p>
Our Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamlearn best in
while pLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam and
responsive. Children aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamolvers.
Children conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamay. <br /> We will work with the
child's natural inclination to explore and solve problems. We believe this
motivates learning for success in your child's school readiness and future.
</p>
</div>
</div>
<div class="slider-item ">
<div class="content">
<div class = "title">
<h3>Our Curriculum</h3>
</div>
<p>
Our center follows the Creative Curriculum. This curriculum is designed to
challenge our children, build their self confidence and, most importantly,
develop aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamum encourages
learning through arts, language, music, and socialization. <br /><br />We believe in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnean nulla quamild
development from early infancy through preschool years, focuses on
teacher-directed and child-initiated learning. <br /><br />The curriculum is goal-directed,
based on ongoing assessments for each child’s strengths and interests. With this
iLorem ipsLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quammotional
development is supporteLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamrmed of the
goals in the classroom and of how learning can be reinforced at home.
</p>
</div></div>
<div class="slider-item ">
<div class="content">
<div class = "title">
<h3>Our Philosophy</h3>
</div>
<p>We believe that each child is unique in
his/her own development and has the right to
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
a wholesome environment that will provide
early training in the life of a child and
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamnd
the Staff dedicate their time and efforts
toward the following goals: </p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
nuLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quams. </li> <li>
ELorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamopmentally
aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
experimentation.
</li> <li> Fostering positive attitudes
towards life and school which lay aLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quamfoundation for experience in future
years.
</li> <li> Encouraging the development
of a positive self-image.
</li> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
working parents. </li> <li> Encouraging
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
school, home, and in the community.
</li> <li> Promoting an educational
environment Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam. </li>
<li> The parent, and staff will bond
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nulla quam
education of their child. </li>
</ul>
</div>
</div>
<div class="slider-bullets">
<span class="bullet"></span>
<span class="bullet"></span>
<span class="bullet"></span>
</div> <!-- slider bullets -->
</div>
</div>
</div>
<div class = 'cell large-12'>
<img height = "300" width = "500" src = "http://s470961525.onlinehome.us/wp-content/uploads/2013/06/walking.png"/>
</div>
</div></div>
Css
.main_body{
background-image: url('https://www.thevinelearningcenter1.com/wp-content/uploads/2015/09/background.jpg');
//background-image: url('http://www.powerpointhintergrund.com/download/children-powerpoint-template-to-educate-your-children-mutimedia--5616');
background-size:cover;
background-repeat: no-repeat;
background-position: top;
width:100%;
max-width:100%;
}
#slider-wrapper {
width: 100%;
height:100vh;
position: relative;
}
.slider-controlls {
.next, .prev{
display: block;
position: absolute;
border: none;
background-color: hsla(200, 100%, 80%, 0.2);
border-radius:10px;
cursor:pointer;
color: black;
top:50%;
padding:15px;
transform: translateY(-50%);
font-size: 18px;
z-index: 99999;
}
.next{
right:70px;
}
.prev{
left:70px;
}
}
.slider-items {
height: 100vh;
position: relative;
overflow:hidden;
.slider-item{
width:100%;
position: absolute;
opacity: 1;
&.active{
opacity:1;
.content{
.title h3{
opacity:1;
z-index: 9999;
font-weight: normal;
font-family: 'Gaegu', cursive;
font-weight:700;
background-color: hsla(200, 100%, 80%, 0.5);;
padding: 25px 0;
letter-spacing: 15px;
color:green;
}
p{
letter-spacing: 3px;
line-height:2em;
text-align: left;
font-family: 'Gaegu', cursive;
opacity: 1;
left: 20%;
z-index: 9999;
font-weight:500;
padding-left:100px;
padding-right:100px;
width:80%;
}
ul{
font-family: 'Gaegu', cursive;
margin-top:-5%;
opacity:1;
letter-spacing: 2px;
text-align: left;
line-height:2em;
font-size: 18px;
z-index: 9999;
padding-left:100px;
padding-right:100px;
width:80%;
}
img{
opacity:1;
}
}
}
.content{
width:100%;
position: relative;
.title h3{
text-align: center;
opacity:0;
transition: all 0.5s;
}
p{
padding: 5% 0 50px 50px;
margin:0 auto;
opacity:0;
transition: all 0.6s;
transition-delay: 0.1s;
background-color: hsla(200, 100%, 90%, 0.8);
width:85%;
font-family: 'Gaegu', cursive;
}
ul{
font-family: 'Gaegu', cursive;
padding: 5% 0 50px 50px;;
margin:0 auto;
opacity:0;
transition:all .10s;
background-color: hsla(200, 100%, 90%, 0.8);
width:85%;
transition-delay:.6s;
margin-top:-3%;
}
}
}
}
.slider-bullets {
width:100px;
bottom:20px;
position:absolute;
margin-top:10px;
text-align: center;
z-index: 99999;
width:100%;
.bullet{
width: 20px;
height: 20px;
background: rgba(#e4e4e4, 1);
border: 2px solid transparent;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: all 0.3s;
&.active{
border: 2px solid #333;
}
}
}
#media screen and (max-width:1300px){
.slider-items{
.slider-item{
width:100%;
position: absolute;
opacity: 1;
&.active{
opacity:1;
.content{
.title h3{
opacity:1;
z-index: 9999;
font-weight: normal;
font-family: 'Gaegu', cursive;
font-weight:700;
background-color: hsla(200, 100%, 80%, 0.5);;
padding: 25px 0;
letter-spacing: 15px;
color:green;
}
p{
font-size:18px;
letter-spacing: 2px;
line-height:1.7em;
text-align: left;
font-family: 'Gaegu', cursive;
opacity: 1;
left: 20%;
z-index: 9999;
padding-left:50px;
padding-right:50px;
width:80%;
}
ul{
font-size:14px;
line-height:2em;
padding-left:50px;
padding-right:50px;
}
}
}
}
}
}
I feel stupid. All I had to do was change display:none when not active and change it to display:block when active ..one of those days.
Related
My goal is that the size of the DIV (height) will adjust itself to the text on the DIV.
(while maintaining a minimum height) but if the user moves his mouse over the DIV
the DIV changes its height properly, without losing the beautiful effect of transition
If I change height: fit-content; to fix size, suppose to height: 100px;
the transition animation works but the div height don't necessarily match the text on the DIV.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 200px;
height: fit-content;
min-height: 50px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis</div>
</body>
</html>
I believe you can handle this situation by using min-height. see the below snippet:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-width: 1px;
width: 200px;
min-height: 50px;
background-color: #0000ff;
transition: 0.5s;
}
div:hover {
background-color: #ffcccc;
width: 200px;
min-height: 300px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt
justo rutrum tellus congue convallis Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue
convallis
</div>
</body>
</html>
In cases where the height of the element is not fixed and we want transitions, we should use either min-hegith or max-height.
You can animate the padding instead of height and you can keep the nice animation :)
div:hover {
background-color: #ffcccc;
padding-bottom: 100px;
}
I looked at some articles on the internet but I couldn't find what I wanted. After the site loads for the first time, when I scroll and scroll to a paragraph, I want the text to scroll from the bottom and come after 1 second.Like on this site:https://www.armoli.com/.
For example I want to apply it here
<h6 style="margin-right: 70px;" class="section-title text-center">Our Solutions</h6>
<h6 style="margin-right: 120px;" class="section-subtitle text-center mb-5 pb-3">We offer efficient, high performance and guaranteed solutions with our experienced team having strong references</h6>
<div class="solutionout1">
<img class="solu" style="height:80px ;" src="assets/imgs/webdevelop.png" alt="web development logo" >
<div ><p class="solutionhead">Web Development</p><p class="solutiontext">
We offer fast, profitable, safe and effective solutions in the light of the latest innovations to those who entrust us with their companies' showcases in the internet world.</p></div>
</div>
HTML, CSS, and JavaScript scroll reveal animations
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i = 0; i < reveals.length; i++){
var windowheight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
else{
reveals[i].classList.remove('active');
}
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #1D212B;
}
section{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:nth-child(1){
color: #fff;
}
section:nth-child(2){
color: #1D212B;
background: #fff;
}
section:nth-child(3){
color: #fff;
}
section:nth-child(4){
color: #1D212B;
background: #fff;
}
section .container{
margin: 100px;
}
section h1{
font-size: 60px;
}
section h2{
font-size: 40px;
text-align: center;
text-transform: uppercase;
}
section .cards{
display: flex;
}
section .cards .text-card{
background: #2696E9;
margin: 20px;
padding: 20px;
}
section .cards .text-card h3{
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
#media (max-width: 900px){
section h1{
font-size: 40px;
}
section .cards{
flex-direction: column;
}
}
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: all 2s ease;
}
.reveal.active{
transform: translateY(0px);
opacity: 1;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Reveal</title>
</head>
<body>
<section>
<h1>Reveal Elements On Scroll</h1>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container reveal">
<h2>Your Title</h2>
<div class="cards">
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="text-card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
</body>
</html>
const intersectionCallback = (entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let elem = entry.target;
if (entry.intersectionRatio >= 0.75) {
elem.classList.add("animate");
}
}
});
};
const Animateditems = document.querySelectorAll("div.text");
let options = {
threshold: 1.0,
};
let observer = new IntersectionObserver(intersectionCallback, options);
Animateditems.forEach((item) => {
observer.observe(item);
});
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
html {
font-size: 66.6%;
}
.scrolldown {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
font-size: 3rem;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
gap: 2rem;
}
.flex-container > div {
flex: 1 1 100%;
border: 0.1rem solid black;
padding: 2rem;
margin: 2rem;
}
.flex-container > div.animate p {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div.animate h2 {
animation: fadeIn 2s;
opacity: 1;
}
.flex-container > div h2 {
font-size: 2.5rem;
opacity: 0;
transform: translateY(0rem);
}
.flex-container > div p {
font-size: 1.8rem;
opacity: 0;
}
#media screen and (min-width: 650px) {
.flex-container > div {
flex: 1 1 40%;
border: 0.1rem solid black;
}
}
#keyframes fadeIn {
from {
transform: translateY(2rem);
opacity: 0;
}
to {
transform: translateY(0rem);
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>animation</title>
</head>
<body>
<div class="scrolldown"><h1>scroll down</h1></div>
<div class="flex-container">
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
<div class="text">
<h2>This is a title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel
inventore, aut id laboriosam reprehenderit consectetur? Praesentium,
aperiam corporis. Iste asperiores molestiae, itaque a minus dicta! Id
omnis suscipit iure illum.
</p>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Here is a complete vanilla solution. (open it in full screen mode)
I need to hide a part of the text that is longer than 2 lines and add '...123 T.' as an indicator of the hidden overflow, like below:
What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview
Html:
<div class="outside-container">
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus
</span>
<span class="small-text">123 T.</span>
</span>
</div>
CSS:
.outside-container {
width: 200px;
}
.container{
max-width: 200px;
}
.main-text {
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.small-text {
color: #8e8f8f ;
font-size: 10px;
vertical-align: middle;
}
In the future you will be able to do this with only one line of code using:
line-clamp: 2 "...123 T.";
You can find more detail in the specification:
The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.
It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.
Until then, here is a very hacky idea to achieve the result:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "123 T.";
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: #8e8f8f;
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Or like below if you want the text to appear only with the dots:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "."; /* at least one character to set the height */
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: transparent; /* no colorataion*/
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Does the following code give the desired output?
.outside-container {
width: 220px;
}
.container {
width: 100%;
margin-bottom: 20px;
display: flex;
align-items: flex-end;
}
.main-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-right: 5px;
}
.small-text {
color: #8e8f8f;
font-size: 10px;
white-space: nowrap;
transform: translateY(-2px);
}
<div class="outside-container">
<div class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</div>
<div class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</div>
<div class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliqua
</span>
<span class="small-text">123 T.</span>
</div>
</div>
I have 5 divs and I'm trying to structure them in the following way:
The divs have a minimum size of 100px
The parent has to show as much of these as possible on the first row; the remaining divs should be wrapped to a new row (or more rows if necessary)
If the first row has a non optimal size the divs should be distributed equally (ie. parent size is 250px - there are 2 divs on the first row having a width of 125px).
Some examples of what I'm trying to achieve:
200px: http://s22.postimg.org/5hj8m5qrl/es3.png
250px: http://s22.postimg.org/ikev5fgzl/es1.png
300px: http://s22.postimg.org/jy6i0qg8x/es2.png
If the size of the parent is 450px, there should be 4 divs, having a width of 112.5px each.
This is what I've tried, but I only got the wrapping done. I have no idea on how to resize them:
HTML:
<div class="parent">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div>
<div class="clear"></div>
CSS
.parent{
width: 250px;
border: 2px solid red;
}
.parent .child {
width: 96px;
border: 2px solid black;
float: left;
}
.parent .clear {
clear: both;
}
There is the link to jfiddle: http://jsfiddle.net/Vbjv5/
I'm looking for a possibile CSS solution, however if it's not possible to achieve this in CSS, javascript is still welcome :)
use jquery simply like this.
jQuery(document).ready(function($) {
var parent_width=$('.parent').width();
var count=$('.item').length();
var param=parent_width/count;
$('.item').width(param);
});
I notice when I change the padding settings on the content class (I think there is too much white space), it completely messes up the smooth dropdown. I'm not sure why this is the case, I can not see anything in the JavaScript.
Fiddle
HTML:
<div class="container">
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>
CSS:
.title {
padding-left:15px;
height:17px;
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px
no-repeat;
cursor:pointer;
margin-bottom:10px;
}
.title img{
width: 24px;
margin-right: 5px;
float: left;
}
.title span{
font-size: 16px;
line-height: 24px;
float: left;
}
.on {
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px no-repeat;
}
.content {
display:none;
padding: 10px;
margin-bottom:10px;
}
JavaScript:
$(document).ready(function() {
$('.title').click(function() {
$('.title').removeClass('on');
$('.content').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
});
What's happening is as the container's height is animated, the children of that container are being affected by margins, line-heights, etc, which are all dependent on the boundaries of the container. Add the following to fix:
.content {
overflow: hidden;
}
Yeah, it's that simple :P
Here's your Fiddle updated.