Bad rendering of "inline" DOM pages


#1

I am using 2 and more permanent DOM pages in one view… like with F7 v1, where was no problem.

But with v2 (also tried v3 beta) these pages are incorrectly overlayed and rendered after app loaded in browser.

Routes in this style are used:

‘’’
// By page name (data-name=“services”) presented in DOM
{
path: ‘/services/’,
pageName: ‘services’,
},
‘’’

http://framework7.io/docs/routes.html#route-properties

What am I doing wrong?


#2

Now I will copy simplified test code here…


#3
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--
  Customize this policy to fit your own app's needs. For more guidance, see:
      https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
  Some notes:
      * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
      * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
      * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
          * Enable inline JS: add 'unsafe-inline' to default-src
  -->
  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#2196f3">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <title>My App</title>

  <link rel="stylesheet" href="css/framework7.min.css">
  <link rel="stylesheet" href="css/icons.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
  <div id="app">




    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main ios-edges">



      <!-- Page, data-name contains page name which can be used in callbacks -->
      <div class="page" data-name="page1">
        <!-- Top Navbar -->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left">
              <a href="/p1/" class="link">
PAGE1
              </a>
            </div>
            <div class="title sliding">Page 1</div>
            <div class="right">
              <a href="/p2/" class="link">
PAGE2
              </a>
            </div>
          </div>
        </div>
        <!-- Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <a href="#" class="link">Left Link</a>
            <a href="#" class="link">Right Link</a>
          </div>
        </div>
        <!-- Scrollable page content-->
        <div class="page-content">
          <div class="block block-strong">
            <p>Here is your blank Framework7 app. Let's see what we have here.</p>
          </div>

          <div class="block-title">Navigation</div>
          <div class="list">
            <ul>
              <li>
                <a href="/about/" class="item-content item-link">
                  <div class="item-inner">
                    <div class="item-title">About</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="/form/" class="item-content item-link">
                  <div class="item-inner">
                    <div class="item-title">Form</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>

        </div>
      </div>



      <!-- Page 2 -->
      <div class="page" data-name="page2">
        <!-- Top Navbar -->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="left">
              <a href="/p1/" class="link">
PAGE1
              </a>
            </div>
            <div class="title sliding">Page 2</div>
            <div class="right">
              <a href="/p2/" class="link">
PAGE2
              </a>
            </div>
          </div>
        </div>

        <!-- Scrollable page content-->
        <div class="page-content">
          <div class="block block-strong">
            <p>Here is your blank Framework7 app. Let's see what we have here.</p>
          </div>
        </div>
      </div>



    </div>

  </div>
  <!-- Cordova -->
  <!--
  <script src="cordova.js"></script>
  -->

  <!-- Framework7 library -->
  <script src="js/framework7.min.js"></script>

  <!-- App routes -->
  <script src="js/routes.js"></script>

  <!-- Your custom app scripts -->
  <script src="js/app.js"></script>
</body>
</html>

#4
// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app  = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: routes,
});

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/',
  stackPages: true
});




alert(app.views.current.el.getAttribute("class")+" -- views.current -- router.allowPageChange? "+mainView.router.allowPageChange+" --> "+mainView.router.currentRoute.url);
//app.views.current.router.navigate('/p2/');
//alert(app.views.current.el.getAttribute("class")+" -- views.current -- router.allowPageChange? "+app.views.current.router.allowPageChange+" --> "+app.views.current.router.currentRoute.url);
//mainView.router.navigate('/p1/');




// Login Screen Demo
$$('#my-login-screen .login-button').on('click', function () {
  var username = $$('#my-login-screen [name="username"]').val();
  var password = $$('#my-login-screen [name="password"]').val();

  // Close login screen
  app.loginScreen.close('#my-login-screen');

  // Alert username and password
  app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
});

#5
routes = [
  {
    path: '/',
    pageName: 'page1',
  },
  {
    path: '/p1/',
    pageName: 'page1',
  },
  {
    path: '/p2/',
    pageName: 'page2',
  },
  // Page Loaders & Router
  {
    path: '/page-loader-template7/:user/:userId/:posts/:postId/',
    templateUrl: './pages/page-loader-template7.html',
  },
  {
    path: '/page-loader-component/:user/:userId/:posts/:postId/',
    componentUrl: './pages/page-loader-component.html',
  },
  {
    path: '/request-and-load/user/:userId/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // Router instance
      var router = this;

      // App instance
      var app = router.app;

      // Show Preloader
      app.preloader.show();

      // User ID from request
      var userId = routeTo.params.userId;

      // Simulate Ajax Request
      setTimeout(function () {
        // We got user data from request
        var user = {
          firstName: 'Vladimir',
          lastName: 'Kharlampidi',
          about: 'Hello, i am creator of Framework7! Hope you like it!',
          links: [
            {
              title: 'Framework7 Website',
              url: 'http://framework7.io',
            },
            {
              title: 'Framework7 Forum',
              url: 'http://forum.framework7.io',
            },
          ]
        };
        // Hide Preloader
        app.preloader.hide();

        // Resolve route to load page
        resolve(
          {
            componentUrl: './pages/request-and-load.html',
          },
          {
            context: {
              user: user,
            }
          }
        );
      }, 1000);
    },
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

#6

Add class stacked to all not active pages, e.g. to page2 and page3:

<div class="page stacked" data-name="page2">
<div class="page stacked" data-name="page3">

#7

Thank your very much, it works :slight_smile:


#8

BTW, by my opinion, it would be nice, to add special chapter about ‘stacked’ and ‘inline’ pages into the docs, here at one place:

http://framework7.io/docs/view.html#view-parameters

together with ‘stackPages’ parameters…


#9

PS also thank you VERY MUCH for great work at F7!

I recommend my client to financially support F7 :wink: :money_mouth_face: :mega: :moneybag: