CODEWITHSUNDEEP
vue.jsquasar-framework
jdost_26
jdost_26

Reputation: 415

Using q-scroll-area with div

I'm adding q-scroll-area to existing content that works. When I add the q-scroll area, the conditional formatting of v-if does not work (either if I wrap the div with q-scroll-area or wrap it the other way). I want the div element to appear and be scrollable only on v-if show.

    <div @click="show = !show">button</div>
    <div v-if="show">
    <q-scroll-area>Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit.  
    </q-scroll-area>
    </div>

Upvotes: 0

Views: 3529

Answers (1)

Lucas David Ferrero
Lucas David Ferrero

Reputation: 1902

In Quasar docs, they set a fixed height to <q-scroll-area> for vertical content. Seems that q-scroll-area has a height of 0 by default.

<div @click="show = !show">button</div>
  <div v-if="show">
    <q-scroll-area style="height: 200px; max-width: 300px;">Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit.  
    </q-scroll-area>
  </div>

Upvotes: 1

Related Questions