Mark Lyons
Mark Lyons

Reputation: 1422

Text spilling out of div - overflow: auto not working

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

Answers (3)

aalaap
aalaap

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

PeeHaa
PeeHaa

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

Gp2mv3
Gp2mv3

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

Related Questions