Reputation: 1422
if you go here and click on a thumbnail, and then on one of the tags, you'll see my problem. For the tags that have too much text and overfow, it's not putting in a scrollbar. I can't put a fixed width because the first part, the title, varies from one submission to the other.
Here's the css for the part that's supposed to put in the scroll when needed.
#scroll-pane{
left: -3px;
position: relative;
width: 100%;
overflow: auto;
font-family:helvetica;
font-size:11px;
color:#fff;
}
Any ideas? I'm sure this is an easy question for you guys.
PeeHaa:
(function($) {
$('#tag_info1').each(function() {
var container = $(this);
var total_height = container.height();
var content_height = parseInt($('span.tag_title', container).outerHeight(true), 10) + parseInt($('span.tag_submission', container).outerHeight(true), 10);
var p_height = 0;
p_height+=parseInt($('span.tag_submission_text', container).css('padding-top'), 10);
p_height+=parseInt($('span.tag_submission_text', container).css('padding-bottom'), 10);
p_height+=parseInt($('span.tag_submission_text', container).css('margin-top'), 10);
p_height+=parseInt($('span.tag_submission_text', container).css('margin-bottom'), 10);
p_height+=parseInt($('span.tag_submission_text', container).css('borderTopWidth'), 10);
p_height+=parseInt($('span.tag_submission_text', container).css('borderBottomWidth'), 10);
$('span.tag_submission_text', this).height(total_height-content_height-p_height);
});
})(jQuery);
Tried to get it to work with mine, but to no avail :(
Upvotes: 4
Views: 14469
Reputation: 4401
I had a similar problem with a div
with height
as well as max-height
specified - it just wouldn't put a scroll bar even though overflow: auto
was specified. It worked after I specified min-height
in addition to the height
and max-height
values.
Upvotes: 0
Reputation: 72662
The overflow: auto
does work. It just isn't there.
You've added the overflow: auto;
to the paragraph.
The paragraph doesn't know what the height is. If you add it to the container it will work.
Or give a height to the paragraph.
I've setup a demo which shows how to calculate the remaining height. To be able to set the correct height on your paragraph.
Upvotes: 2
Reputation: 1451
I've no problem on Firefox. But when you use overflow: auto; You must use it on the container, for example a div.
EDIT:
Ok, I understand your problem.
Currently you are using height: 180px;
on the container. If you try something like min-height: 100px;
and overflow: auto;
on the text container, you can fix the size of the text container.
So your text container will have the same height but the container is extendable if the title is bigger.
I don't know if it's clear but if you want I can try to re-explain.
Upvotes: 1