Unscrollable dialog content?

Questions
1

i have a long list within dialog but it is not scrollable i wraped list within page-content div but still .

open_dialog_cities() {
  this.$f7.dialog
    .create({
      title: "list",
      text: "list",
      content: `
        <div class='page-content'>
          <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
        </div>`
    })
    .open();
}

how can i make the list scrollable just using Framework7 classes hierarchical structure? i tried to wrap inside view block but still !

2

You need to limit its height to at least something like:

...
<div class='page-content' style="height: 200px">
  ...
1 Like
3

thanks for reply … i was trying to avoid extra css and just use available framework classes .

4

Even if ‘height’ is set, the content does not become scrollable.

5

To make it actually work I did this:
Add the following to your app.css:

.scrollable-dialog {
  height: auto;
  max-height: 90vh;
}

.scrollable-dialog .dialog-text {
  height: auto;
  max-height: 60vh;
  overflow-y: auto;
}

Add cssClass: 'scrollable-dialog' to the dialog instance parameters.
No need to add extra page-content div.

2 Likes