In the bookmark_matrix in this fiddle
http://jsfiddle.net/sjD24/14/
I'm trying to hide content outside of the 500 px width
by setting
overflow:hidden
I'm not getting the desired effect as it wraps to the next line instead.
MDN Reference
The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.
Please note that I do not want it to wrap. Perhaps that would have been a better title.
You have no height set, so the div's height expands as needed. There's no overflow.
You could do something like this:
#bookmark_matrix{
border: 1px dotted #222222;
padding: 5px;
width: 500px;
overflow: hidden;
height: 1em;
}
Related
I have a wrapper with elements inside that obviously I want to scroll when there are more elements than the box can hold. However when I scroll below the last word it has a large amount of excess space. I believe this may be caused by the fixed height. I have tried using max and min height but doesn't seem to fix it Preview
JSFiddle was choking on your code because you were double terminating your icons. I removed the double </i> and the code resolved fine on JSFiddle: https://jsfiddle.net/uwtcje0L/
With that said, the reason for your issue was pretty easily identified, you have 400px of padding on the bottom of div.communitieswrapper. Replace the CSS class you provided with the following:
.communitieswrapper{
border: 2px solid #eeeeee;
border-radius: 7px;
padding-top:10px;
z-index: 1;
position: relative;
height: 450px;
overflow-y: scroll;
overflow-x: hidden;
}
Fiddle with example: https://jsfiddle.net/uwtcje0L/1/
I have the following:
XHTML:
<div id="container">
// contents
</div>
CSS:
#container { margin: 0 auto; width: 940px; overflow: hidden; padding: 10px; border: 1px solid #CCCCCC; }
The div is centered on the page with margin: 0 auto and I use overflow: hidden to allow the DIV to automatically expand down to the height of its contents.
I have some content in the DIV which has a box-shadow on it. The problem is due to the overflow: hidden rule the shadow does not fully appear on the page. The only ways around this I have found:
Take out overflow: hidden - but then the container DIV doesn't expand down.
Use height / min-height on #container - however this wont work well with all pages on the site.
Use float: left - but then the DIV isn't centered on the page.
Anybody got any more suggestions for this?
You can use one of the many clearfix techniques. That will let you remove overflow:hidden and fix the cropped box-shadow.
Here's a recent article on the topic: http://css-tricks.com/snippets/css/clear-fix/
Pretty sure some margin on the div would solve it, but if you show some more code it's easier to check.
I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>
http://zergxost.com/test.html
As you can see, if there's not enough text, the bottom gray line goes way higher than it should. Can someone please explain why doesn't "article"'s hitbox include the "header"? And how ti fix it? Thanks.
You're missing a either a overflow: hidden or a clear: left declaration. You should always clear floating objects or declare overflow to be hidden (carefully!).
article {
overflow: hidden;
}
Or:
div#wrapper div.related {
width: 100%;
height: 960px;
border-top: 1px solid #808080;
margin-top: 20px;
clear: left;
}
Why/how overflow: hidden works
When you set a block-level element to have overflow: hidden, you're actually telling the browser change how it handles block elements. Functionally, you told the browser to contain normal elements (including floated ones). Things that will exceed the total dimensions of the box, usually by relative/absolute positioning, or images with huge widths, will get clipped to the wrapper's width. Drop down regions that cross over a container with overflow: hidden may cause them to get clipped as they enter as well.
Elements at the end of a overflow: hidden container will also have padding-bottom and margin-bottom applied.
Another answer: https://stackoverflow.com/a/3416217/24950
You need to clear div#wrapper div.related. Try adding the following to your CSS:
div#wrapper div.related {
clear: both;
}
I have a textarea tag that has text I want a user to edit. The textarea tag is wrapped inside a div like so:
div.container {
width: 295px;
max-height: 250px;
overflow: auto;
position: relative;
border: 1px solid: #EEEEEE;
}
textarea {
width: 270px;
height: 100%;
resize: none;
overflow: hidden;
border: none;
}
<div class="container">
<textarea id="overview">
blah blah....
</textarea>
</div>
The div has a fixed width, a max height and shows scroll bars when the height is too large. All this is fine, but how can I get the textarea to expand to 100%? It's currently only two lines tall and doesn't expand to show all the text when I have a lot of text inside it. Please see this fiddle to see what I'm talking about.
Your div.container needs an explicit height specified. Child contents won't expand up to a max-height, just height.
Something like this:
http://jsfiddle.net/dpF7k/
or more simply applying directly to the textarea instead of a wrapping div: http://jsfiddle.net/ujKCf/
The only thing that is missing is that it does not shrink below 250px if there is less content.
The textarea can only expand as big as div#container
While you set your container to be max-height: 250px, it won't expand to that size unless something pushes it. Since your textarea is 100%, it just uses whatever is available.
To see what I mean, just set container to be height: 250px instead of max-height.
Instead, you could use JavaScript to solve this.
This is a jQuery plugin by James Padolsey. It looks like it'd do exactly what you want.
Edit: I thought OP didn't want a scroll bar given his overflow... NVM then