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?


Log in to reply