Infinite - scroll showing one item

Hi All,

See below codes, dont know while only item 1 popup, I want all 20 items to pop up with infinite scroll to the bottom of the pop page.

var dialog = this.$f7.dialog

        .create({

          title: "App User Consent",

          text: "",

          content:

            "<div class='page' data-page='home'>" +

            "<div class='page-content infinite-scroll-content'>" +

            "<div class='list simple-list'>" +

            "<ul>" +

            "<li>Item 1</li>" +

            "<li>Item 2</li>" +

            "<li>Item 3</li>" +

            "<li>Item 4</li>" +

            "<li>Item 5</li>" +

            "<li>Item 6</li>" +

            "<li>Item 7</li>" +

            "<li>Item 8</li>" +

            "<li>Item 9</li>" +

            "<li>Item 10</li>" +

            "<li>Item 11</li>" +

            "<li>Item 12</li>" +

            "<li>Item 13</li>" +

            "<li>Item 14</li>" +

            "<li>Item 15</li>" +

            "<li>Item 16</li>" +

            "<li>Item 17</li>" +

            "<li>Item 18</li>" +

            "<li>Item 19</li>" +

            "<li>Item 20</li>" +

            "</ul>" +

            "</div>" +

            "<div class='preloader infinite-scroll-preloader'></div>" +

            "</div>" +

            "</div>",

          buttons: [{ text: "No", close: true }, { text: "Yes" }],

          onClick: (dialog, index) => {

            if (index == 1) {

              const app = this.$f7;

              //var payload = {};

              //payload.profileMessage = response;

              //this.$store.dispatch("deleteAccount");

              this.$f7router.navigate("/phoneverify/");

              this.$f7.dialog.close();

              app.panel.close();

            } else {

            }

          },

          on: {

            open: function() {

              //console.log("OPEN");

            }

          }

        })

        .open();

You need to set correct styles on page and page-content:

var dialog = this.$f7.dialog
  .create({
    title: "App User Consent",
    text: "",
    content:
      "<div class='page' data-page='home' style='height: 300px; position:relative'>" +
      "<div class='page-content infinite-scroll-content' style='overflow: auto'>" +
      "<div class='list simple-list'>" +
      "<ul>" +
      "<li>Item 1</li>" +
      "<li>Item 2</li>" +
      "<li>Item 3</li>" +
      "<li>Item 4</li>" +
      "<li>Item 5</li>" +
      "<li>Item 6</li>" +
      "<li>Item 7</li>" +
      "<li>Item 8</li>" +
      "<li>Item 9</li>" +
      "<li>Item 10</li>" +
      "<li>Item 11</li>" +
      "<li>Item 12</li>" +
      "<li>Item 13</li>" +
      "<li>Item 14</li>" +
      "<li>Item 15</li>" +
      "<li>Item 16</li>" +
      "<li>Item 17</li>" +
      "<li>Item 18</li>" +
      "<li>Item 19</li>" +
      "<li>Item 20</li>" +
      "</ul>" +
      "</div>" +
      "<div class='preloader infinite-scroll-preloader'></div>" +
      "</div>" +
      "</div>",
    buttons: [{ text: "No", close: true }, { text: "Yes" }],
    onClick: (dialog, index) => {
      if (index == 1) {
        const app = this.$f7;
        //var payload = {};
        //payload.profileMessage = response;
        //this.$store.dispatch("deleteAccount");
        this.$f7router.navigate("/phoneverify/");
        this.$f7.dialog.close();
        app.panel.close();
      } else {
      }
    },
    on: {
      open: function () {
        //console.log("OPEN");
      },
    },
  })
  .open();

Thanks, your suggestion worked.

Hi All,

Two more challenges here:

  1. How can I hide the “Yes” button from showing when the dialog box opens.

buttons: [{ text: “No”, close: true }, { text: “Yes” }],

  1. How can I get the “Yes” button to show when the user clicks the checkbox

” +
“” +
“” +
” +

By Checking this, you agree to the collection and use of information in accordance with this Privacy and Policy

” +
“” +
” +

Thanks