Integrating QLayout, QTabs, & QScrollArea

[ericg97477]

I have a simple, sample project at https://github.com/EricG-Personal/quasar_tab_layout/tree/develop which demonstrates the problem.

I started with the default vue app created with ‘quasar init’ and added a QLayoutFooter.

Essentially, I have a QLayout with QTabs and inside one of the tabs is a QScrollArea which is between two div’s which provide some context for the QScrollArea (title content & key content) The issue is that I want the height of the QScrollArea to be the same height of the content part of the QLayout which should be defined as: height of window - height of QLayoutHeader - height of QLayoutFooter - height of title content - height of key content.

How can I get the QScrollArea to dynamically grow and shrink with the height of the window?

The source code for my QLayout content area is:

<template>
  <q-page class="page-content">

    <div class="title-content">
      title content
    </div>

    <div class="main">
      <q-tabs animated swipable color="tertiary" glossy align="left">

        <q-tab default name="taba" slot="title" label="TabA" />
        <q-tab name="tabb" slot="title" label="TabB" />

        <q-tab-pane keep-alive name="taba">
          <q-scroll-area class="scroll-area">
            <div v-for="n in 100" :key="n.id">
              the quick brown fox jumped over the lazy dog
            </div>
          </q-scroll-area>
        </q-tab-pane>

        <q-tab-pane keep-alive name="tabb">
          <div>tab b content</div>
        </q-tab-pane>

      </q-tabs>
    </div>

    <div class="key-content">
      key content
    </div>
  </q-page>
</template>

<style>
</style>

<script>

import {
  QTabs,
  QTab,
  QTabPane,
  QScrollArea
} from 'quasar'

export default {
  name: 'PageIndex',

  components: {
    QTabs,
    QTab,
    QTabPane,
    QScrollArea
  }
}
</script>

<style>

.page-content {
  background-color: lightgray;

  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.main {
  flex-grow: 1;
  background-color: green;
}

.title-content, .main, .key-content {
  flex-shrink: 0;
}

.scroll-area {
  width: 100%;
  height: 100px;
  background-color: yellow;
}
</style>

Here is a screen shot of what is produced:

[ericg97477]

I created a branch called scroll_area_only where I am trying to see if I can just get the scroll area to size correctly. The direct link to the branch is: https://github.com/EricG-Personal/quasar_tab_layout/tree/feature/scroll_area_only

I believe one part I was missing was that I need to use the provided quasar flex css classes, so that is what I am doing on this branch. It appears that it is working better in that various pieces seem to be sized correctly, but the content in the scroll area is not showing up.

What am I doing wrong?

the source code for the page is:

<template>
  <q-page class="column page-content ">

    <q-scroll-area class="col scroll-area">
      <div v-for="n in 100" :key="n.id" class="scroll-row-content">
        the quick brown fox jumped over the lazy dog
      </div>
    </q-scroll-area>

  </q-page>
</template>

<style>
</style>

<script>

import {
  QScrollArea
} from 'quasar'

export default {
  name: 'PageIndex',

  components: {
    QScrollArea
  }
}
</script>

<style>

.page-content {
  background-color: green;
}
.scroll-area {
  background-color: red;
}

.scroll-row-content {
  background-color: blue;
  color: white;
}

</style>

It produces:

[ericg97477]

The scroll_area_only does work with the latest version of Firefox, but not with the latest version of Safari or Chrome.

My question now becomes is this a browser bug, a quasar bug, or might it still be a problem with my code that firefox is not affected by?

[ericg97477]

Based on a conversation with Hawkeye64 in Discord, the problem seems to be that a div created by QScrollArea has the height set to 0.

The general structure is QScrollArea->Inner Div->Content Container DIV->Content Div’s … It’s the Inner Div whose height is 0. The height of the Content Container DIV is correct and seems to be calculated based on the total height of the Content Div’s. When the height of the QScrollArea is explicitly set, the Inner Div gets the same height at the QScrollArea. When the height of the QScrollArea is calculated automatically, the Inner Div does not receive the height of the QScrollArea. (However, with the latest version of Firefox, the Inner Div does get the height of QScrollArea and that would seem is why it works.)

The proposed solution is to assign the class of the QScrollArea to a computed property which can calculate the correct height of the area and assign it explicitly. I am trying to work out how to do that and my code currently looks like:

<template>
  <q-page class="column page-content ">

    <q-scroll-area :class="classScrollArea">
      <div v-for="n in 100" :key="n.id" class="scroll-row-content">
        the quick brown fox jumped over the lazy dog
      </div>
    </q-scroll-area>

    <!-- <q-scroll-area class="col scroll-area">
      <div v-for="n in 100" :key="n.id" class="scroll-row-content">
        the quick brown fox jumped over the lazy dog
      </div>
    </q-scroll-area> -->

  </q-page>
</template>

<style>
</style>

<script>

export default {
  name: 'PageIndex',

  computed: {
    classScrollArea: function () {
      return { 'background-color': 'yellow' }
    }
  }
}
</script>

<style>

.page-content {
  background-color: green;
}
.scroll-area {
  background-color: red;
}

.scroll-row-content {
  background-color: blue;
  color: white;
}

</style>

Now, this does not yet set the height, just the background color…however, when I check the background-color of the QScrollArea with the Chrome Dev Tools, it is not set. It seems to be adding a class "background-color’ to the list of classes assigned to the QScrollArea.

I have pushed this commit to the GitHub project. I am not sure what I am doing wrong or how to resolve the problem and would appreciate some additional help.

[brunen9]

@ericg97477 try instead to assign a computed property to a style like this: <q-scroll-area :style="{'background-color': computedColor}">. Or for height: <q-scroll-area :style="{'height': computedHeight}">.

Then:

computed: {
    computedColor: function () {
      return 'yellow' 
    },

    computedHeight: function () {
      return 200 + 'px' 
    },
  }

[realtebo]

I’ve exactly the same problem. QScrollArea has 0px height.

Did someone found a workaround?