Q-tree: Is it possible to add a scrollbar?



  • I have a dynamically built tree with multiple levels. User can expand all or collapse all using buttons. If expanding the tree makes it longer than the page, I’d like to show a scrollbar.

    And if that’s possible, I’d also like a way to ensure a selected node is visible by auto-scrolling to show it.

    I tried this but it doesn’t work…

    <q-scroll-area>
      <q-tree
        .....
      />
    </q-scroll-area>
    

    I know I can have the whole page scroll, but I want to keep the top toolbar visible while the tree scrolls. I also have another panel beside it with related information which should not scroll with the tree.



  • Found a way to do it, but probably a better way. Anyway here’s what works for me…
    In the template:

    <div id="treeScroll" class="scroll overflow-hidden">
       <q-scroll-area :style="treeHeightStyle">
           <div class="q-px-sm">
              <q-tree
                   ....
              </q-tree>
           </div>
        </q-scroll-area>
    </div>
    

    And in the script:

    mounted () {
      window.addEventListener('resize', this.setTreeHeight)
      this.setTreeHeight()
    },
    destroyed () {
      window.removeEventListener('resize')
    },
    methods: {
      setTreeHeight () {
        const treeTop = document.getElementById('treeScroll').offsetTop
        const treeHeight = window.innerHeight - treeTop
        this.treeHeightStyle = 'height: ' + treeHeight + 'px'
      }
    },
    data () {
      return {
        treeHeightStyle: '',
        ...
    }
    

    If anyone has a better approach, let’s hear it. Otherwise, maybe someone else will benefit from this post.
    Still haven’t figured out how to ensure the selected tree item is visible.


Log in to reply