No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-splitter height

    Help
    3
    3
    496
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CWoodman
      CWoodman last edited by

      All the examples in the docs set the height to a fixed value:
      e.g. style=“height: 400px”
      But in the real world, I need to set the height to match the current window size.
      So I did this…

      <q-splitter 
          horizontal
          v-model="ratio" 
          :style="heightStyle"
      >
      

      And in the script…

      mounted () {
          window.addEventListener('resize', this.setPanelHeight)
          this.setPanelHeight()
       },
      
      methods: {
         setPanelHeight () {
             const panelHeight = document.getElementById('main-container').offsetHeight
             this.heightStyle = 'height: ' + panelHeight + 'px'
          }
      },
      
      data () {
          return {
               heightStyle: ''
          }
      }
      

      This works fine when first mounted, but does not respond to user resizing the window - the splitter height remains fixed and it’s possible that the split will be off-screen. There needs to be a way to respond to window size changes!

      Also, I notice that with horizontal split, there are automatic scrollbars in each pane, but no scrollbars with a vertical split. Is there a way to add these?

      1 Reply Last reply Reply Quote 0
      • S
        studio511 last edited by

        hi if you are tracking windowsize, maybe you should use computed to capture the change in window size.
        eg:
        computed: {
        return {
        heightStyle: this.$q.window.screen.height + ‘px’
        }
        }

        1 Reply Last reply Reply Quote 0
        • M
          michael123 last edited by michael123

          This is one of the first google results, so here are my notes. I ran into two problems with QSplitter:

          1. The UI element didn’t fill the space vertically. Setting style=“height: 100vh” had the splitter fill the vertical space w/o affecting it’s before/after children.

          2. Content wasn’t expanding in the after because the height wasn’t set. Here’s my layout: QLayout -> QSplitter -> template:after -> QPageContainer -> router-view => QPage -> DivStuff + QResizeObserver -> Content

          In resize, I get a ref to DivStuff, get it’s parent, get the parents “min-height”, and set DivStuff’s min-height using :style="{ ‘min-height:’: minHeight + ‘px’}"

          Lastly, I set Content’s height to 99% or I get it stretches weird.

          Hope this helps someone.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post