Q-splitter height

CWoodman

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?

studio511

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’
}
}

michael123

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

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.
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.

No More Posting New Topics!

Q-splitter height