Page content not visible

Questions
1

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!

2

Looks like you missed root app parameter:

var fw7 = new Framework7({
    root: '#appMain',
    routes: [
    ...
3

That fixed it, thanks!

Can you briefly explain why that was the causing the issue? The documentation doesn’t state situations where the root attribute needs to be defined.