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