I want to know if there's a HTML/CSS only way to detect (or at least, show/hide some elements with pseudo classes etc.) to take action when an element's contents overflow (in vertical only). Yes, I KNOW it can be done and I KNOW how to do it (I don't need JS examples on this, PLEASE), I just want to know if there's a clever way, without any javascript.
I'm trying to show a "more..." button which will appear ONLY when there's overflow, and trying to achieve this without JS if possible.
100% height solution
Here's a version of this solution for 100% height - so when content tries to take up more than the whole page, you get a "more..." link. This works fine in all browsers.
http://jsfiddle.net/nottrobin/u3Wda/1/
I've used JavaScript only for the "Add another row" control - for demo purpoes. There is no JavaScript used in the actual solution.
Caveat:
Since the height of the user's browser is variable, there is no way to ensure that lines won't appear cut in half at the point of the "more" link, or that the "more" link will be completely visible.
Original solution
Make the container element overflow: hidden and give it a max-height. Then put your "more" link inside that container element, with position: absolute so it's just inside that max-height. Now the "more" link won't be shown unless the content inside the container pushes the container to its max-height.
If you're careful with your line-heights then you should be able to prevent any lines from being chopped in half.
Example:
Just enough text: http://jsfiddle.net/nottrobin/MrAKv/17/
Too much text: http://jsfiddle.net/nottrobin/MrAKv/16/
The shorter version will only work in browsers that support max-height:
http://caniuse.com/#search=max-height
If you need IE6 support, use this slightly less succinct solution:
http://jsfiddle.net/nottrobin/MrAKv/18/
(Disclaimer - only tested in Google Chrome)
Here is one for fixed height containers: http://jsfiddle.net/NGLN/PC94w/
Related
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
I am currently working on a prototype that is using CSS3 multi columns for dividing up content and it appears to work well. My issue is that inside of a block that is part of the columns there is an expanding height section and well, in Firefox when the height of an element inside of a CSS3 multi-column changes it disappears and then Firefox crashes.
Shouldn't CSS3 multi-columns take into account varied height content inside or is it not made for that sort of thing? I'd really hate to have to use a plugin like Columnizer, because Columnizer is a pain in the butt to get working correctly.
Here is the layout:
[DIV]
[CONTENT] - Default height is 38 pixels
[EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]
The issue is as soon as the link is clicked and the height changes, it's like it loses its layout and positioning (the height and width change to 0), then Firefox crashes. This is also the case if I use Firebug to change the height manually.
I resolved the issue right are posting this question basically and my solution was as follows in-case someone else runs into this issue which I believe some will.
I had a parent div element with the appropriate CSS3 multi-column code. The inner elements are article elements (you could just use div's though). The issue was that the inner article elements were being floated left (just out of pure habit of having to float things to give the appearance of columnised items). The floated elements were clashing with the CSS3 multi-column code thus crashing the browser.
I'm guessing that because a float modifies the layout of an element, the multi-column code was trying to perhaps readjust the box and then getting into an endless loop. I'm not entirely sure what went on, but floating elements inside of a multi-column div or anything is bad.
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.
I use overflow: hidden on my site to get control over ending floats.
Which up to now always have worked perfectly.
I know there are several different approaches of ending floats but the overflow trick normally works best.
However this time I cannot get it right.
If you look at the following page and try to adjust the volume you'll see that the volume control goes under my header.
http://pieterhordijk.com/sandbox/html5-audio-api/mp3-format
The problem is in the #content-container div
When I remove the overflow the volume control goes over my header (which is what I want).
But I can't just drop the overflow or I have to result to another solution to control the floats, which is not something I want to do unless REALLY necessary.
Anybody has a solution to this problem?
You've already selected an answer, but there are some issues that should be pointed out. First, clearing a <br> is not semantic, it adds extra code and can cause issues in some browsers.
Next, you should not use the overflow method of clearing floats now that CSS3 is becoming more prevalent. It causes issues with any new parameters that display effects outside the boundaries of the container. At a minimum both box and text shadows will be cut off if you are using the overflow method.
You really should use the clearfix method. It's simple to implement, does not require any additional mark up, and does not cause issues with any CSS3 properties.
Good reading -
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/
You could give the snippets div clear:both. You have the element in there anyway, and I assume you wouldn't want it to wrap around the nav, so it's not just adding unsemantic elements/classes for the heck of it.