CSS for setting overflow to scroll not working

Question

I have a div using the following class:

div.textStatement
{
    height: 70px;
    overflow: hidden;
}

When the user clicks a link ('Show More'), the div expands to show more text and the 'overflow' should get set to 'scroll' so that the user can read all the text, in the event there is more text than the height of the div will show. However, the reference to the 'overflow' property of the div is coming back 'undefined' so that I can't set it to 'scroll.' Any idea why the ref to the div's overflow is coming back 'undefined'? I think that would fix the problem (and make the scrollbars show up).

Here's the div:

<asp:Panel ID="textStatement" class="textStatement" runat="server"></asp:Panel>
<label id="candidateStatementShowMoreLess" class="MoreLess" onclick="ShowMoreLess(this)">Show More</label>

Here's the javascript (using jQuery):

var IsStatementExpanded = false;
var IsDescriptionExpanded = false;

function ShowMoreLess(moreLessLink)
{
    var section = $(moreLessLink).prev("div");
    var sectionId = $(section).attr("id");
    var collapsedHeight = 70;
    var expandedHeight = 300;

    if (section.height() == collapsedHeight)
    {
        section.animate({ height: expandedHeight }, 500,
            function ()
            {
                $(moreLessLink).html("Show Less");

                // ***** This should be setting the overflow to scroll on the div, but isn't, as "attr" is coming back undefined. *****
                section.attr("overflow", "scroll");
            });

        if (sectionId == "textStatement")
        {
            IsStatementExpanded = true;
        }
        else if (sectionId == "textDescription")
        {
            IsDescriptionExpanded = true;
        }
    }
    else
    {
        section.animate({ height: collapsedHeight }, 500,
            function ()
            {
                $(moreLessLink).html("Show More");

                // ***** This could have the same problem as above, but when the user collapses the div. *****
                section.attr("overflow", "hidden");
            });

        if (sectionId == "textStatement")
        {
            IsStatementExpanded = false;
        }
        else if (sectionId == "textDescription")
        {
            IsDescriptionExpanded = false;
        }
    }
}

Joseph Marikle · Accepted Answer · 2011-09-22 03:13:03Z

4

section.attr("overflow", "scroll");

is incorrect. It needs to be

section.css("overflow", "scroll");

answered Sep 22, 2011 at 3:13

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS for setting overflow to scroll not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related