@CWoodman Found a fix! Key was to set the tab-panel heights smaller to allow for padding. Thanks for your time on this. I appreciate the help and moral support.
All working now! Here’s the final code if you’re interested…
<template>
<q-layout view="hHh LpR lFr">
<q-header>
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="leftDrawerOpen = !leftDrawerOpen"
/>
<q-toolbar-title>
Scroll Test
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
<q-space />
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="rightDrawerOpen = !rightDrawerOpen"
/>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
content-class="bg-grey-1"
:width="150"
:breakpoint="500"
>
<q-list>
<q-item v-for="x in 15" :key="x">
Left Item {{ x }}
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<q-page class="full-height" id="page">
<q-splitter v-model="splitterRatio">
<template v-slot:before>
<q-tabs v-model="tabLeft" align="left" shrink stretch>
<q-tab name="tab1" label="Tab 1" />
<q-tab name="tab2" label="Tab 2" />
</q-tabs>
<q-tab-panels v-model="tabLeft">
<q-tab-panel name="tab1" :style="heightStyle">
<q-scroll-area class="fit">
<p>
Tab 1 Content.
</p>
<p>
Set window height small enough to see scrollbals. Try scrolling in any other sub-window to see scroll working correctly.
</p>
</q-scroll-area>
</q-tab-panel>
<q-tab-panel name="tab2" :style="heightStyle">
<q-scroll-area class="fit">
<p>
Tab 2 Content.
</p>
<q-list>
<q-item v-for="x in 20" :key="x">
Tab two content item {{ x }}
</q-item>
</q-list>
</q-scroll-area>
</q-tab-panel>
</q-tab-panels>
</template>
<template v-slot:after>
<q-tabs v-model="tabRight" align="left" shrink stretch>
<q-tab name="tab3" label="Tab 3" />
<q-tab name="tab4" label="Tab 4" />
</q-tabs>
<q-tab-panels v-model="tabRight">
<q-tab-panel name="tab3" :style="heightStyle">
<q-scroll-area class="fit">
<p>
Tab 3 content. Note local scrollbar.
</p>
<q-list>
<q-item v-for="x in 20" :key="x">
Tab three content item {{ x }}
</q-item>
</q-list>
</q-scroll-area>
</q-tab-panel>
<q-tab-panel name="tab4" :style="heightStyle">
<q-scroll-area class="fit">
<p>
Tab 4 content.
</p>
</q-scroll-area>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</q-page>
</q-page-container>
<q-drawer
side="right"
v-model="rightDrawerOpen"
show-if-above
bordered
content-class="bg-blue-1"
:width="150"
:breakpoint="500"
>
<q-list>
<q-item v-for="x in 15" :key="x">
Right Item {{ x }}
</q-item>
</q-list>
</q-drawer>
</q-layout>
</template>
<script>
export default {
name: 'MainLayout',
mounted () {
window.addEventListener('resize', this.setHeight)
this.setHeight()
},
methods: {
setHeight () {
const panelTop = document.getElementById('page').offsetTop
const panelHeight = window.innerHeight - panelTop - 60
this.heightStyle = 'height: ' + panelHeight + 'px'
}
},
data () {
return {
heightStyle: '',
leftDrawerOpen: false,
rightDrawerOpen: false,
tabLeft: 'tab1',
tabRight: 'tab3',
splitterRatio: 50
}
}
}
</script>
