Как автоматически добавить полосу прокрутки в vue onsenui v-ons-card

Документация OnsenUI2 ons-card (и, в частности, для Vue2.js v-ons-card) автоматически показывает полосу прокрутки рядом с содержимым, если я добавляю много элементов v-ons-list-item.

См. здесь: https://onsen.io/v2/api/vue/v-ons-card.html

Вот скриншот того, что происходит, когда я изменяю учебник с дополнительными элементами списка и добавляю полосу прокрутки:

перетекание содержимого карточки с помощью полосы прокрутки

Но затем, когда я делаю это вручную в своем коде, я не получаю полосы прокрутки.

   <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>

Как это было достигнуто?

В примере не показан полный css, а в chrome devtools я не могу открыть и показать демонстрационное приложение. :-(

Добавление style="overflow: auto" в div, обертывающий внутреннюю часть карты, к содержимому карты или к самой карте ничего не делает.


person pashute    schedule 17.10.2017    source источник


Ответы (1)


В этом уроке нет дополнительного CSS. Полоса прокрутки на вашем изображении находится на содержимом страницы, а не на элементе карты. Просто установите height и overflow: auto, и вы получите полосу прокрутки вашей карты.

person Fran Dios    schedule 23.10.2017