I have the following problem: I have a horizontal menu with a sub-menu beneath it. I want the sub-menu to slide up under the main menu. Normally this would be no problem at all, just have the sub-menu on a lower z-index and move it up. BUT in this case both the menu and sub-menu have partial opacity. As things stand now when I move the sub-menu up you can still see it showing through the main nav.
What I need to do is as the sub-menu moves up make the part of it that's under the main menu invisible.
There's an animated gif showing the correct behavior and appearance at http://i.stack.imgur.com/1n4jJ.gif
Any ideas? Thanks!
[ADDITION]
Here's my demo code. The CSS:
body {
margin: 0;
padding: 0;
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
}
#topmenu {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(255,255,255,0.5);
}
#submenu {
position: relative;
width: 100%;
height: 50px;
top: 50px;
padding-top: 10px;
background-color: rgba(255,255,255,0.5);
border-top: 1px solid #666666;
}
#main {
position: relative;
top: 60px;
}
And the HTML:
<body>
<div id="topmenu">Menu 1 | Menu 2 | Menu 3 | Menu 4</div>
<div id="submenu">Sub menu 1 | Sub menu 2 | Sub menu 3 | Sub menu 4</div>
<div id="main">
<h1>Here is the main content!</h1>
<p><strong>Notice how when you scroll this page the sub menu is still visible under the main menu? I need it to be clipped as it moves under the main menu. *AND* I want to do this without JavaScript. It's OK to see the main text under the main nav.</strong></p>
<h2>Here's an animated gif that hopefully shows what I'm after...</h2>
<img src="http://i.stack.imgur.com/1n4jJ.gif" alt="sliding nav demo" />
<p>Lorem ipsum dolor sit amet, consecetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
</div>
</body>
I've now tossed demo code up on JSFiddle at http://jsfiddle.net/chrisspurgeon/6ddWz/ . It has the correct behavior EXCEPT that the part of the sub-nav that's under the main nav should be invisible, and the translucency of the main nav should not be effected.
you must set the z-index value for both divs and,you must give the lower div a greater z-index value,also you must set the overflow of the bottom div to visible.
example:
.upperdiv {z-index:5;}
.bottomdiv {z-index:100;overflow:visible;}
This example isn't exact, but it should put you in the right direction: Updated Fiddle
HTML
<div id="header">Hover this.
<div id="drop">Drop content here</div>
</div>
CSS
#drop {
background: rgba(0, 0, 0, .5);
color: white;
height: 0;
overflow: hidden;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
position: absolute;
}
To hide on scroll
$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$("#drop").css('height', '0');
}
else {
$("#drop").css('height', '20px');
}
});
});
There are two things at work here.
1. Z-indexing
The topmenu needs to be rendered above the submenu in the stack. Right now because of simple HTML ordering, your submenu is being rendered above the topmenu.
We fix this with z-indexing:
#topmenu
{
z-index: 999;
}
#submenu
{
z-index: 998;
}
2. Opacity
In the example you provided (this GIF), the topmenu has a fully opaque background. In order to completely hide the submenu when it passes behind the topmenu, we need1 to have a fully opaque background:
#topmenu
{
background: rgba(255, 255, 255, 1);
}
JSFiddle
Footnotes:
1: This is only if you want a JS-free solution. If you will allow JS, there are solutions that will allow you to use partially transparent backgrounds.
Related
I have two sibling elements which each contain dynamic content.
<div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
</div>
In some cases sibling-1 will have more content then sibling-2 and vice versa.
I would like the height of the second element sibling-2 always equal the height of the first sibling-1. If the height of sibling-2 is greater then the height of sibling-1 it will overflow the flex div and thus be scrollable.
Is there any way to accomplish this with Flexbox?
Yes, it is possible. Leave the sibling setting the max height alone and set the others' flex-basis: 0 and flex-grow: 1, which according to the spec will expand them to their sibling's height. No absolute positioning. No setting height on any elements.
main {
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 7em;
border: thin solid black;
margin: 1em;
}
:not(.limiter)>div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
<main>
<section>
<div>I'm longer and will scroll my overflow. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text
in flow text in flow text in flow text in flow text in flow text in flow text in</div>
</section>
<section class="limiter">
<div>Every parent's siblings match my height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
<section>
<div>I'm shorter but still match the height. in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text in flow text</div>
</section>
</main>
Is there any way to accomplish this with Flexbox?
Basically, no. The flex equal heights feature is based on the height of the container, not any particular sibling.
So sibling-1 and sibling-2 can always be equal height.
But flexbox has no built-in mechanism to limit the height of items to the height of one sibling.
Consider JavaScript or CSS positioning properties.
Here's an example using absolute positioning:
.flex {
display: flex;
width: 200px;
position: relative;
}
.flex>div {
flex: 0 0 50%;
border: 1px solid black;
box-sizing: border-box;
}
.sibling-2 {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
}
<div class="flex">
<div class="sibling-1">text<br>text<br>text<br>text<br>text<br>text<br></div>
<div class="sibling-2">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>
</div>
jsFiddle
Yes you can accomplish this by making siblings 1 and 2 also flex containers, then on sibling-2 make an absolute div (also flex container) inside that will be the parent of your scroller
<div class="sibling-1 flex sibling"></div>
<div class="sibling-2 flex sibling">
<div class="absolute flex scroller-wrap">
<div class="relative vertical-scroller">
your content here
</div>
</div>
</div>
css:
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.flex{
display:flex;
}
.sibling-2{
flex:1;
}
.scroller-wrap{
height:100%;
}
on sibling 2 just set a minimum height on pixels - useful on responsive cases if siblings 1 and 2 stack each other on mobile
As I mentioned in the comments and has been continued in other answers, there is no flexbox method.
It is possible using position:absolute on the second sibling though...but since that's not actually a flexbox solution, this is here for information only.
.flex {
margin: 1rem auto;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
* {
margin: 0;
outline: 0;
}
.flex {
width: 80%;
margin: 1rem auto;
border: 1px solid grey;
position: relative;
display: flex;
}
.sibling-1 {
flex: 0 0 50%;
}
.sibling-2 {
position: absolute;
right: 0;
width: 50%;
height: 100%;
overflow: auto;
}
<div class="flex">
<div class="sibling-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore quia, voluptatum! Perspiciatis praesentium nemo, labore mollitia numquam recusandae voluptatem consectetur amet deleniti cum nesciunt blanditiis, esse quis doloremque vero! Reiciendis
porro impedit perspiciatis. Amet in praesentium molestias ipsum ad quis quia doloribus, veniam unde, ea ducimus rerum porro tenetur voluptatem, a laudantium. Accusantium provident voluptatibus perferendis hic blanditiis laborum amet consequatur
esse, fugiat doloremque consectetur ullam sequi, ratione perspiciatis, voluptatem eaque vitae rem repellendus in architecto vel nulla animi neque. Accusantium animi voluptatum, suscipit possimus,</p>
</div>
<div class="sibling-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque modi quibusdam aliquam officia illo itaque ratione, iste architecto ad blanditiis fugiat sequi laborum cupiditate voluptatum, autem non? Quibusdam ad eius hic rem id. Libero, tempora
dicta reiciendis placeat nihil quia fuga iste aliquid quo minus labore sapiente fugit, similique non aliquam, beatae pariatur nobis fugiat! Ipsam nobis fugit maxime aliquam accusamus explicabo nostrum ab nemo adipisci dolorem qui porro ea pariatur
corporis aut reiciendis optio, sint eum nam suscipit itaque aspernatur recusandae. Cumque qui quod doloremque. Ut voluptates, asperiores, laborum excepturi quam odit, quos rerum assumenda sapiente saepe nisi? Numquam placeat repellat eum dolorem
reprehenderit dolores culpa id explicabo consequuntur. Quas nobis veritatis tempora animi similique earum commodi, laborum blanditiis dolor illo, eaque accusamus aliquid nam a ex, velit, maiores natus. Id totam ullam corporis. Repellat aperiam,
distinctio maxime, dolorum illum labore recusandae. Sequi repellendus provident deserunt amet culpa, ratione dignissimos! Quibusdam delectus mollitia, ducimus. Error id architecto, ea molestias voluptate impedit inventore amet ducimus modi repellat
in. Asperiores soluta veritatis id eius, distinctio nisi voluptates voluptatibus iste iusto error officia tempore! Ducimus sed commodi quisquam provident iure voluptatum aliquam, nobis rem dolore, consectetur, dolor rerum eum nam adipisci, libero
beatae eaque aliquid sapiente? Eius, earum quas nostrum quasi reiciendis officia quaerat omnis. Cupiditate suscipit et tempora quibusdam perspiciatis eius cum, nisi facere animi. Delectus magnam inventore ipsum, veritatis reiciendis. Ipsum adipisci
recusandae, similique quas labore voluptas animi eaque velit, alias eveniet qui libero obcaecati suscipit, quam nihil quos placeat.</p>
</div>
</div>
From your code and to avoid extra wrapping , sticky on a side, height:0 on the other then overflow:auto on the parent can also do the job with flex:
example (you will easily understand it)
.flex {
display: flex;
/* demo purpose */
width: 500px;
border: solid;
overflow: auto;/* make the parent scroll */
gap:0.5em;
}
.flex .sibling-1 {
position: sticky;/* stick the reference for the height */
top: 0;
}
.flex .sibling-2 {
height: 0;/* give it no height to start from and let the parent show the scrollbar */
}
<div class="flex">
<div class="sibling-1">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
<div class="sibling-2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
</div>
My simplified (to me at least) code snippet based on Lucent's answer:
main {
display: flex;
font-family: "nunito"
}
section1 {
display: flex;
flex-direction: column;
width: 15rem;
border: thin solid gray;
}
section2 {
display: flex;
flex-direction: column;
width: 15rem;
border: thin solid gray;
}
section1 > div {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}
<main>
<section1 class="scroll">
<div>I'm a div in section 1 ---
I have extra css rules of flex-basis 0px (making me as small as possible), flex 1 (making me fill up available space), and overflow y auto (making me scroll the extra content) --- My parent section 1 is a flex column --- My grandparent main is a flex row ---</div>
</section1>
<section2>
<div>I'm a div in section 2. --- My parent section 2 is a flex column --- My grandparent main is a flex row --- The height of the div in section 1 will adjust to my height.</div>
</section2>
</main>
I want to create simple toggle button, that will expand/hide text paragraph. I wan't to use as little javascript as possible.
I tried it this way: Fiddle
The problem occurs when I want to hide expanded content. The content will be hidden after an unwanted delay - When user clicks the button the animation won't start immediately. I have tried it in chrome and firefox. In both I get the same behaviour.
Can someone explain me why is my code behaving this way and how to fix it?
Here is source code that is identical to the one in the fiddle link:
HTML:
<div class="container">
<h1 class="header">Header</h1>
<p class="content">
content
</p>
toggle
</div>
CSS:
.content {
max-height: 0;
overflow: hidden;
transition: max-height 1s ease-in-out;
}
.expanded .content {
max-height: 1000px;
}
Javascript:
var $container = $('.container');
$('.toggle').click(function() {
$container.toggleClass('expanded');
});
Add min-height instead:
.content {
max-height: 0;
overflow: hidden;
transition: min-height 1s ease-in-out;
}
.expanded .content {
min-height:20px;
}
Use min-height rather than max-height.
When you click 'toggle' and the div is expanded, the height of the div is reduced in 2 steps... first to it's "auto" height, then to the max-height in the original class. So what looks like a delay is actually 2 steps of height reduction.
max-height: is not an absolute value, it's ambiguous unless the content itself forces the height to be greater. The script has to calculate what the actual height is upon the transition then determine if it is greater than the max-height setting which is being transitioned to.
You can see this by just adding a defined height to the expanded class:
var $container = $('.container');
$('.toggle').on('click', function() {
$container.toggleClass('expanded');
});
.content {
max-height: 0px;
overflow: hidden;
background: #ddd;
transition: max-height .2s ease-in-out;
}
.expanded .content {
max-height: 300px;
height: 150px;
background: #ddd;
transition: max-height .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="content">
content
</p>
toggle
</div>
If your content is actually greater and it causes the div to be taller than the max-height value, you won't have this problem. It's only an issue when the original height is less than the max-height value in the transition.
var $container = $('.container');
$('.toggle').on('click', function() {
$('.container').toggleClass('expanded');
});
.content {
max-height: 0px;
overflow: hidden;
background: #ddd;
transition: max-height .2s ease-in-out;
}
.expanded .content {
max-height: 1000px;
background: #ddd;
transition: max-height .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</p>
toggle
</div>
If you adjust and use min-height you get a smooth transition. You also need to add height: 0; to the main class to completely hide the div on collapse.
var $container = $('.container');
$('.toggle').on('click', function() {
$container.toggleClass('expanded');
});
.content {
min-height: 0px;
height: 0;
overflow: hidden;
background: #ddd;
transition: min-height .2s ease-in-out;
}
.expanded .content {
min-height: 150px;
background: #ddd;
transition: min-height .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="content">
content
</p>
toggle
</div>
Webkit has the property -webkit-line-clamp which supports a multi-line ellipsis.
Take a look at this demo (on a webkit browser of course) and this CSS-tricks article
.wpr {
overflow: hidden;
}
.clamp2 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
height: 3.6em;
/* I needed this to get it to work */
}
<div class="wpr">
<div class="clamp2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit
litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</div>
So far so good.
The problem is when I add direction:rtl - for right-to-left languages - the -webkit-line-clamp ceases to work - DEMO
Markup
<div class="wpr">
<div class="clamp3">
Text
</div>
</div>
CSS
.wpr
{
overflow: hidden;
direction: rtl /* <-- When adding this property ellipsis doesn't work anymore */
}
.clamp3 {
display: -webkit-box;
-webkit-line-clamp: 3; /* Maximum of 3 lines of text */
-webkit-box-orient: vertical;
height: 3.6em;
}
.wpr
{
overflow: hidden;
direction: rtl;
}
.clamp2 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
height: 3.6em; /* I needed this to get it to work */
}
<div class="wpr">
<div class="clamp2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</div
Is this a webkit bug?
Are there any work-arounds?
AFAIK ellipsis with direction: rtl only works on one line. E.g.:
.ellipsis-rtl {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
FWIW, you misspelled direction in your example.
I have a simple page.
HTML and CSS are as follows.
<body>
<div style="background-color:red;">
<div style="background-color:green; width:40%; float:left;">
LEFT
</div>
<div style="background-color:blue; width:60%; float:right;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</div>
</body>
The problem is that the contents of blue div come from php and it causes variable height of blue div. What I want, is to have the height of the left green div to be same as the height of blue div.
I've solved this one using jquery but can I achieve this one only with html and css?
Thanks.
Don't float the elements, wrap the elements using a wrapper div, assign display: table; to the wrapper element, and than assign display: table-cell; to nested elements, that's all you need to achieve what you want to..
Demo
.wrap {
display: table;
width: 100%;
}
.wrap div.one, div.two {
display: table-cell;
width: 50%;
}
.wrap .one {
background: #f00;
}
.wrap .two {
background: #0f0;
}
Depending on which browsers you need to support, you could use CSS flexbox.
Simple example:
div{
display: flex;
}
Demo
CSS Flexbox browser support
I want to add a fixed sidebar like in the picture below.
How is that possible?
Appreciate any suggestion.
Solution
used to this
fixed position
.sidebar{
position:fixed;
left:0;
width:250px; // width change to according your left bar side
top:0;
bottom:0;
}
Demo
.SomeClass { position: fixed }
This fiddle might solve your problem, with right column being flexible and left column fixed
http://jsfiddle.net/R5TZH/
<div class="container">
<div class="columns">
<div class="right-col">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum
</div>
</div>
<div class="left-col">
<a class="selected" href="#">05 <br><strong>Today</strong></a>
06 <br><strong>TOM</strong>
07 <br><strong>MON</strong>
08 <br><strong>TUE</strong>
09 <br><strong>WED</strong>
08 <br><strong>THU</strong>
09 <br><strong>FRI</strong>
</div>
</div>
CSS:
.container {
width: 100%;
}
.left-col {
background: none repeat scroll 0 0 #434345;
float: left;
margin-left: -100%;
padding: 10px;
width: 80px;
}
.left-col a {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 10px 10px 10px 10px;
color: #000000;
float: left;
font-size: 18px;
height: 50px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
width: 60px;
}
.columns {
float: left;
width: 100%;
}
.right-col {
margin-left: 100px;
background:red;
height:400px;
}
for fixed side bar, style
position:fixed;
this will do but not in chrome, so you may use this
position:absolute;
top:0;
left:0;
bottom:0;
width:180px;// you may change as per your requirement
this works in all browsers :)
Edit : updated fiddle with content div
http://jsfiddle.net/MarmeeK/nkprH/5/
I hope this will do, for more answer post some of your work in details, thank you