Q-splitter height
-
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?
-
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’
}
} -
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.
-