I have what may be an unusual situation. In my Quasar based app, I have a constants.js file. In this file, there are several constants defined whose values need to be based upon the physical machine the app is running on. The machine will always be unix based with a fixed hostname.

Now, I believe that process.env and quasar.conf.js can be helpful here in that I can setup a custom variable that could contain the hostname that I am building for. I suppose I could construct a Makefile that manipulates quasar.conf.js and then runs quasar build.

Does that seem like the right / good solution?

Has anyone faced a similar situation? How have you resolved it?

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.

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?

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:

@s-molinari It does make sense. thank you.

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:

@s-molinari Ok. I think I have a better understanding now after playing around a bit more. There are two primary ways to create and run a default vue app using quasar:

Method 1:

1. quasar init my_app
2. cd my_app
3. quasar dev

Method 2:

1. vue create my_app
2. cd my_app
3. vue add quasar
4. yarn dev

Method 1 is the recommended way.

Is my understanding correct?

@s-molinari ok. So, what are the complete set of steps to get a default vue app running with quasar?

The documentation in the part “Vue CLI 3 plugin” seems to indicate that one starts with vue create and then do vue add quasar.

https://quasar-framework.org/guide/

Is that not correct? If not, what is?

Perhaps I am just confused, I thought this series of steps would create a default vue project with quasar which I could then serve with “quasar dev”.

$ vue --version
3.3.0

$ quasar --version
0.17.23

$ vue create array_sort
$ cd array_sort
$ vue add quasar
$ quasar dev

However, I get the following error:

$ quasar dev
 app:paths ⚠️  Error. This command must be executed inside a Quasar v0.15+ project folder. +0ms
 app:paths For Quasar pre v0.15 projects, npm uninstall -g quasar-cli; npm i -g quasar-cli@0.6.5 +3ms

What am I doing wrong?

Output from the above commands are:

$ vue create array_sort

Vue CLI v3.3.0
? Please pick a preset: default (babel, eslint)


Vue CLI v3.3.0
✨  Creating project in /Users/ericg/depot_javascript/array_sort.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.13.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 72.98s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 11.36s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project array_sort.
👉  Get started with the following commands:

 $ cd array_sort
 $ yarn serve

$ vue add quasar

📦  Installing vue-cli-plugin-quasar...

yarn add v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-quasar@0.17.1
info All dependencies
└─ vue-cli-plugin-quasar@0.17.1
✨  Done in 9.80s.
✔  Successfully installed plugin: vue-cli-plugin-quasar

? Select Quasar Theme: Material Design
? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes
? Import all Quasar components, directives and plugins? Yes
? Use RTL support? No
? Choose Icon Set Material Icons
? Quasar i18n lang - one from https://github.com/quasarframework/quasar/tree/dev/i18n en-us
? Select features: Animations, Material Icons, Fontawesome, Ionicons, MDI

🚀  Invoking generator for vue-cli-plugin-quasar...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 11.45s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-quasar
   The following files have been updated / added:

     src/styles/quasar.styl
     src/styles/quasar.variables.styl
     vue.config.js
     package.json
     public/favicon.ico
     src/App.vue
     src/assets/logo.png
     src/components/HelloWorld.vue
     src/main.js
     yarn.lock

   You should review these changes with git diff and commit them.

 INFO  quasar
             Documentation can be found at: https://quasar-framework.org

Quasar is relying on donations to evolve. We'd be very grateful if you can
                 take a look at: https://www.patreon.com/quasarframework
                                            Any amount is very welcomed.
If invoices are required, please first contact razvan.stoenescu@gmail.com

             Please give us a star on Github if you appreciate our work:
                               https://github.com/quasarframework/quasar

                                                    Enjoy! - Quasar Team

I would like to have two q-layouts on my page with the general structure:

layout A
  header A
  scrollable content A
    layout B
      header B
      scrollable content B
      footer B   
  footer A

Is something like this possible with q-layout?

The problem I am having is that with my nested layout B, header B and footer B can end up underneath header A and footer A and I would want header B and footer B to be pinned inside of scrollable content A.

Hopefully this makes sense…

If this is not the correct solution, what is the recommended way to do something like this?