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…


    And in the script…

    mounted () {
        window.addEventListener('resize', 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?

Log in to reply