QScrollArea and QList

tdumitr

I have a CodePen where I reproduced my problem. What I want to achieve is a SPA look, where only the QList scrolls, rather than the entire page. The height of the list should be determined by how tall the viewport is minus the height of the content above it.

My attempt at a solution has been to place a QScrollArea around the QList and use the flex CSS property. The content of the panel on the left becomes:

              <div class="home-page-column-title">
                Some stuff on the left
              </div>
              <q-input
                standout
                rounded
                dense
                v-model="search"
                placeholder="Search stuff">
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
              <q-scroll-area style="flex: 1 1 auto;">
                <q-list>
                  <q-item
                    v-for="(item, index) in items"
                    :key="index" >
                    <q-item-section>
                      <q-item-label>{{item}}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-scroll-area>

The end result surprised me, to say the least. Instead of the list showing in a scrollable area, the div and q-input above are now scrollable, and the list has disappeared altogether.

If I set a fixed size to the scroll are (say height: 300px;) then the scroll area shows correctly, but resizing the window will not change the height of the scroll area.

Is there a way to have the scroll area occupy whatever space available? (That is without capturing the window’s resize events. ) What am I doing wrong in my CodePen?

metalsadman

@tdumitr see how the quasar docs do it https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/Layout.vue#L33

tdumitr

Hi @metalsadman . I did take a look at the link you provided. Pug is not my forte, but after converting it to HTML, it seems that the layout has a drawer where a list is embedded in scroll area with a search box at the top. The way the scroll area’s height is controlled is by using a style="height: calc(100% - 50px);" attribute. This would essentially set the height of the scroll area to the maximum available less 50 px, which would be used by the search box. I tried the same exact style attribute and it did not work as expected. In fact there is no change from what I reported earlier. You can see the result in the same CodePen

dobbel

@metalsadman What is the reason that all of Quasar core components are written with Pug instead of ‘normal’ template code? Apart from adding an unnecessary( I presume) dependency to Quasar. As most most people don’t know Pug using Pug will probably just make their lives more difficult when it comes to contributing to the Quasar community. Your thought?

metalsadman

@dobbel core components are written in JS, i think for flexibility and performance (per Vue2), old version were used to be written in html. i only see pug used in some components of the docs, but most are in html format, and js render functions.

personally, i use html more since it feels more natural for me and render functions sometimes if i want to reuse it on several components as a mixin.

No More Posting New Topics!

QScrollArea and QList