Why does my div show vertical scrollbars although there is enough vertical space

1
votes

I am using google chrome 19.x or IE9.x

I have set the Html5 Doctype.

I have a jquery dynatree plugin inside my TreeDiv.

Although there is enough space to show more tree items vertically without the need to scroll, those scrollbars are visible.

Why is that?

The problem also is when the vertical space gets so less then vertical scrollbars are also shown from the dynatree which is inside an ul-tag. Thus the ul-dynatree is doing it correctly, only my div is going crazy with the scrollbars!

I can even set overflow: hidden; on the TreeDiv that does not help. The vertical scrollbar is always visible :/

enter image description here

function loadUnits(data) {       
        $('#TreeDiv').dynatree({
            onActivate: function (node) {
                getEmployees(node.data.key);
            }, children: data
        });
    }

#TreeDiv{      
    width: 200px;
    position: fixed;
    left: 100px;
    top: 50px;
    bottom: 0px;  
    overflow: hidden;       
}
3
cssscrollbaroverflowdynatree
Do you expect people to correctly guess what your problem is from that screenshot? – lanzz
We're programmers, not designers. Code please. – Šime Vidas
I can see TWO scrollbars in the image, so you have to put overflow:hidden on two divs. – 11684
@lanzz there is more than this image. I also did a description,right? The code I just posted is actually meaningless as its nearly nothing... – Elisabeth
@11684 There is one div and inside the dynatree which is rendered internally as an ul-tag with li-tags. I already set the outer div with overflow:hidden. It did not help anything. – Elisabeth

3 Answers

2
votes

please find that if you have the inner div has a style of overflow:auto.This generally cause this problem.

1
votes

Here is the solution:

go to .css of dynatree ..\src\skin-vista\ui.dynatree.css

and edit the tag:

ul.dynatree-container
{
font-family: tahoma, arial, helvetica;
font-size: 10pt; /* font size should not be too big */
white-space: nowrap;
padding: 3px;
margin: 0; /* issue 201 */
background-color: white;
border: 1px dotted gray;
width: 480px;
height: 580px;
overflow: scroll;   

}

You done. you wil automaticall grow shrink tree

0
votes

I was having an issue where the scroll bars would occur when checking the check box items.

I added this to my onSelect

$("ul.dynatree-container").css("overflow", "hidden");