Purpose: Initially use the default styles for as long as the expanded tree
does not grow too big (I don't want to have the ugly scrollbars there). When the tree does indeed grow too big dynamically switch to a second set of styles which use a scrollbar.
What steps will reproduce the problem?
1. extend ui.dynatree.css to have an additional set of "dynatree-containerXXX" styles (purpose: have a set of CSS settings which used overflow scolling and one that does not), e.g.
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: 0px dotted gray; /*FIX: removed the border line*/
overflow: auto;
height: 100%; /* issue 263 */
}
ul.dynatree-containerXXX
{
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: 0px dotted gray;
overflow: scroll;
height: 300px; /* issue 263 */
}
... etc
2. use below code to switch from the default "classNames" to the new one (e.g. in a drag&drop handler when you realize that the list is getting too long and needs a scrollbar..):
$("#tree2").dynatree("option", "classNames", {
container: "dynatree-containerXXX"
});
$("#tree2").dynatree("getTree").redraw();
=> it seems that the respective change on an existing tree DOES NOT have the same effect that it would have had while initially loading the tree...
3. try to use the same settings in the tree config to see what it should look like (but doesnt..)
classNames: {
container: "dynatree-containerXXX"
}
For now I just applied a hack by adding this function to the jquery.dynatree.js:
resetContainerClass: function(className) {
if (this.tnRoot.ul) {
this.tnRoot.ul.className= className;
}
},
.. which I now use instead of $("#tree2").dynatree("option",...
The code can be seen in action here (the scrollbar here shows only when there are more than 12 items in the list):
http://www.wothke.ch/tinyrsid/index.php/explorer?playlistId=3
What version of the dynatree and jQuery are you using?
- the one currently used in the official drag&drop3 example. it says Version: 1.2.4 in the file..
On what operating system and browser?
- WinXP using Firefox, Chrome & Opera (IE8 does not work due to a separate defect which I reported earlier)
What DOCTYPE declaration are you using?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
Please provide any additional information below.
The impression I got while briefly looking into the jquery.dynatree.js is that certain settings are only evaluated once but not again when there might have been changes (see render function)...
PS: The following instance of a hard-coded classname also seems to be bloody stupid (how is that supposed to work if users can chose their own classes.??):
$("ul.dynatree-container", node.tree.divTree).append($helper);
That's true, the classNames property only works on initialization. You could instead call $("ul.dynatree-container").toggleClass("scrolling") and add some css after the standard style ul.dynatree-container.scrolling { overflow: scroll; height: 300px; } Not tested, but you get the idea; anyway: no reason to modify the original JS or CSS, I guess.Labels: -Priority-Medium Priority-Low Milestone-Release1.2.5