3. Unable to show navbar on Android via Phonegap

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Unable to show navbar on Android via Phonegap

  • B

    Hello,

    I am trying to get a navbar going at the top of the app without luck.
    In the chrome browser it shows but not via Phonegap, any idea why please?
    I can get the swipe bar to work when I move my finger from left to right but no navbar not even the message “swipe right to open the menu” on the home page. I don’t get it.
    All my CSS and JS files are linked correctly.

    Here is my code:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="css/onsenui.min.css">
    <link rel="stylesheet" href="css/onsen-css-components.min.css">
    <link rel="stylesheet" href="css/ionicons/css/ionicons.min.css">
    <script src="js/onsenui.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>
<ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
        <ons-page>
            <ons-list>
                <ons-list-item onclick="fn.load('index.html')" tappable>
                    Home
                </ons-list-item>
                <ons-list-item onclick="fn.load('sendreport.html')" tappable>
                    Send Report
                </ons-list-item>
                <ons-list-item onclick="fn.load('contact.html')" tappable>
                    Contact
                </ons-list-item>
                <ons-list-item onclick="fn.load('login.html')" tappable>
                    Login
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="index.html"></ons-splitter-content>
</ons-splitter>

<template id="index.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Home
            </div>
        </ons-toolbar>
        <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
            Swipe right to open the menu!
        </p>
    </ons-page>
</template>

<template id="sendreport.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Send a Report
            </div>
        </ons-toolbar>
    </ons-page>
</template>

<template id="contact.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Contact us
            </div>
        </ons-toolbar>

    </ons-page>
</template>

<template id="login.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                Login
            </div>
        </ons-toolbar>
    </ons-page>
</template>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
    window.fn = {};

    window.fn.open = function() {
        var menu = document.getElementById('menu');
        menu.open();
    };

    window.fn.load = function(page) {
        var content = document.getElementById('content');
        var menu = document.getElementById('menu');
        content.load(page)
            .then(menu.close.bind(menu));
    };
</script>
</body>
</html>

    Any idea why please? I have been on this for a good 8 hours without luck :-(

    Thanks.

    0