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?
Now I will copy simplified test code here…
<!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>// 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);
});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',
},
];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">
Thank your very much, it works 
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…
PS also thank you VERY MUCH for great work at F7!
I recommend my client to financially support F7 
I have just one question… does in this usecase your back button navigation work?
Thanks