Search code examples
cssvuejs2scrollbaronsen-ui2

How to automatically add scrollbar to vue onsenui v-ons-card

The documentation of the OnsenUI2 ons-card (and in particular for Vue2.js v-ons-card) automatically shows a scrollbar next to the content if I add many v-ons-list-item elements.

See here: https://onsen.io/v2/api/vue/v-ons-card.html

Here's a screenshot of what happens when I modify the tutorial with extra list items, and the scrollbar added:

spilling over card content with scrollbar

But then when I do it manually in my code I get no scrollbar. 

   <v-ons-card>
  <div class="title">
    My title here
  </div>
  <div class="content">
    <v-ons-list>
      <!-- <v-ons-list-header>row 1</v-ons-list-header> -->
      <v-ons-list-item>Row 1</v-ons-list-item>
      <v-ons-list-item>Row 2</v-ons-list-item>
      <v-ons-list-item>Row 3</v-ons-list-item>
      <v-ons-list-item>Row 4</v-ons-list-item>
      <v-ons-list-item>Row 5</v-ons-list-item>
      <v-ons-list-item>Row 6</v-ons-list-item>
      <v-ons-list-item>Row 7</v-ons-list-item>
      <v-ons-list-item>Row 8</v-ons-list-item>
      <v-ons-list-item>Row 9</v-ons-list-item>
      <v-ons-list-item>Row 10</v-ons-list-item>
      <v-ons-list-item>Row 11</v-ons-list-item>
      <v-ons-list-item>Row 12</v-ons-list-item>
      <v-ons-list-item>Row 13</v-ons-list-item>
      <v-ons-list-item>Row 14</v-ons-list-item>
      <v-ons-list-item>Row 15</v-ons-list-item>
      <v-ons-list-item>Row 16</v-ons-list-item>
    </v-ons-list>
  </div>
</v-ons-card>

How was it achieved?

The example is not showing the full css, and in chrome devtools I'm not able to open and show the demo app. :-(

Adding style="overflow: auto" to a div wrapping the card internals, to the card content, or to the card itself does not do anything.

Solution

  • There is no extra CSS in that tutorial. The scrollbar in your image is on the page content, not on the card element. Simply set a height and overflow: auto and you'll get your card scrollbar.