Документация 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, обертывающий внутреннюю часть карты, к содержимому карты или к самой карте ничего не делает.