jqxTree scrolling to the top by collapse/expand nodes

Question

When I collapse or expand a node in a jqxTree the scrollbar of the container element is going to the top.

Is it possible to avoid this behaviour?

The solution of setting a fix height to the widget is not good for me. I need dynamic height. It is possible only if I have a conainer div with scrollbar.

http://jsfiddle.net/ccegq/633/

To reproduce the problem, open the fiddle scroll down and collapse/expand any node.

html:

<div id='div1'>
  <div id='jqxTree'>
      <ul>
          <li item-selected='true'>Home</li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
          <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                      <ul>
                          <li>Consumer photo and video</li>
                          <li>Mobile</li>
                          <li>Rich Internet applications</li>
                          <li>Technical communication</li>
                          <li>Training and eLearning</li>
                          <li>Web conferencing</li>
                      </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
          </li>
      </ul>
  </div>
</div>

JavaScript:

$('#jqxTree').jqxTree({ theme: 'energyblue' });

CSS:

#div1 {
  overflow-y: scroll;
  height: 300px;
  max-height: 300px;
}

score 0 · Answer 1 · answered Mar 07 '18 at 09:04

0

 $('#jqxTree').jqxTree({
       theme: 'energyblue',
       height:300
   });

Set a hieght for the tree. This will solve your problem. The scroll you seen is not from jqxTree.I hope this will help.

answered Mar 07 '18 at 09:04

Sumesh TG

2,557
2
15
29

Thanks, but as I wrote in my question: "The solution of setting a fix height to the widget is not good for me." – dvjanm Mar 08 '18 at 09:51
Calculate the height programmically. for eg: $( window ).height(); // Returns height of HTML document $( document ).height(); – Sumesh TG Mar 08 '18 at 10:28

jqxTree scrolling to the top by collapse/expand nodes

1 Answers1