I am new to Framework7 and I am using version 2.3.1 with a Cordova application.
I have the Framework7 variable initialized as such (left out the app ID, name and version number):
var fw7 = new Framework7({
routes: [
{
path: "/login/",
url: document.location.pathname.split("index.html")[0] + "login.html"
}
],
panel: {
swipe: "left",
},
});
var mainView = fw7.views.create(".view-main", {
url: "/login/"
});
var $$ = Dom7;
The index.html file looks like this:
<body>
<div id="appMain">
<div id="statusBar" class="statusbar"></div>
<div id="optionsMenu" class="panel panel-left panel-cover">
<div class="view panel-view">
<h2>This is the left panel header</h2>
<p>Some text in a paragraph.</p>
<p>another paragraph</p>
</div>
</div>
<div class="view view-main"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/framework7/framework7.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
I left out the head but I have the framework7.min.css file included.
login.html has a div with class=“page” and a div with class="page-content with some content in it.
When the app loads, the screen is completely blank. When I check in Chrome’s remote debug I can see all the content from login.html inside the view-main div! However, the content isn’t visible on the screen. I have no idea why this is happening. If I change the view initialization to:
var mainView = fw7.views.create(".view-main");
and put the page content directly in the view-main div it still doesn’t show up. If I remove the div’s with the “page” and “page-content” tags the material miraculously appears. I have read the documentation here:
https://framework7.io/docs/view.html#initial-page-route
and I don’t see what I am doing wrong. I have checked some other posts and the problem is usually a routing issue, but since the content is actually there I don’t think that is the case here.
Thanks!