[solved] Two scroll areas in a page-container

[Dennis van Beek]

Hello,

Maybe it’s not the correct way to do it, but I was hoping to wrap my q-page’s in q-scroll-area’s, because I would like both pages to be able to scroll independent of each other.

This works perfectly for one (left or right), but not for both.

So, i.e. this works for the left side:

<template>
  <q-layout >
    <q-page-container class="flex row">
      <!-- Left side -->
      <q-scroll-area class="col bg-yellow">
        <router-view name="navigation" class="col" />
      </q-scroll-area>
      <!-- Right side -->
      <router-view name="details" class="col" />
    </q-page-container>
  </q-layout>
</template>

But if I try it for both pages, the whole screen is blank, and nothing is displayed:

<template>
  <q-layout>
    <q-page-container class="flex row">
      <!-- Left side -->
      <q-scroll-area class="col bg-yellow">
        <router-view name="navigation" class="col" />
      </q-scroll-area>
      <!-- Right side -->
      <q-scroll-area class="col bg-light-blue">
        <router-view name="details" class="col" />
      </q-scroll-area>
    </q-page-container>
  </q-layout>
</template>

What’s the best way to solve this?

[Dennis van Beek]

This seems to work (of course, after removing the q-pages from the router views):

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex row">
        <q-scroll-area class="col bg-yellow">
          <router-view name="navigation" class="bg-grey-3" />
        </q-scroll-area>
        <q-scroll-area class="col bg-light-blue">
          <router-view name="details" />
        </q-scroll-area>
      </q-page>
    </q-page-container>
  </q-layout>
</template>