i unable to put space between two button . and i also tried without ons-row and ons-col
code :
<ons-template id="page2.html">
<ons-page>
<ons-row>
<ons-col >
<ons-button id="show-loading" type="button" class="button button--large" ng-click="showLoading()">Show
Loading
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="uniqueDeviceShow" type="button" class="button button--large"
ng-click="uniqueDeviceShow()">Unique Device ID
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="barcodeScan" type="button" class="button button--large" ng-click="barcodeScan()">Barcode
Scan
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="fileMake" type="button" class="button button--large" ng-click="fileMake()">File Make
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="fileUpload" type="button" class="button button--large" ng-click="fileUpload()">File
Upload
</ons-button>
</ons-col>
</ons-row>
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Please wait.<br>Loading...
</ons-modal>
</ons-page>
</ons-template>
Here is my OnsenUI
I try to do something like this ionic UI
Note : if i use <br>then ui button space between two button ok fine it is working well in iOS but not android . what should i do ?
Related
I have a form input field and a button inside a modal and for some reason they both are inactive. If I try to click them I can not enter any text into the field or the button doesnt do anything. All fields and buttons work fine on the page and all my other pages, but dont work correctly in my modals.
Modal
<ons-modal var="modalSample" ng-controller="SampleController">
<ons-navigator var="nav3" page="sample">
</ons-navigator>
</ons-modal>
<ons-template id="sample">
<ons-page>
<ons-tabbar position="top">
<ons-row>
<ons-col width="15%">
<div style="margin-top:15px"><i class="ion ion-arrow-left-c" ng-click="modalSample.hide()"></i></div>
</ons-col>
<ons-col width="45%" align="left">
<div style="padding-top:18px;color:#fff;">Sample Groups</div>
</ons-col>
<ons-col width="20%" align="left">
</ons-col>
</ons-row>
</ons-tabbar>
<ons-row style="padding-top:145px">
<ons-col>
<input type="text" id="stufxx" placeholder="test"/>
<ons-button modifier="large" class="login-button" ng-click="alert('heelo')" style="background:#ccc">Test button</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
Rest of page
<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>
<ons-template id="menux.html">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()" style="padding-top:2em;padding-bottom:3.5em;">
<ons-row >
<ons-col width="20%" align="left">
<img src="img/profile.png" width="30" class="profilex"/>
</ons-col>
<ons-col width="80%" align="left">
Andrew
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('tags.html', {param1: 'bla'});menu.closeMenu()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-barcode-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right" >Tags</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="modalSample.show()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-pie-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Sample Groups</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('apps.html', {param1: 'bla'});menu.closeMenu()" style="border-bottom:1px solid #ddd">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-paper-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Apps</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('settings.html', {param1: 'bla'});menu.closeMenu()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-cog-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Settings</span>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-page ng-controller="LoginController">
<ons-tabbar position="top">
<ons-tabbar-item style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="negative.html" icon="ion-android-walk"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</ons-navigator>
</ons-template>
I am a bit confused as to why you would have a navigator in a modal, but I did a codepen that has inputs and buttons in it which works. Please see this codepen:
http://codepen.io/anon/pen/qbGQrN
The modal is just simply this:
<ons-modal var="modal">
<ons-button onclick="alert('It Works! Input - '+document.getElementById('myInput').value);modal.hide();">Button</ons-button>
<input type="text" id="myInput"/>
</ons-modal>
I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I have.
<body>
<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<div class="menu">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
<ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
Today's Meals
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
<ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
Some other Page
</ons-list-item>
</ons-list>
</ons-page>
</div>
</ons-sliding-menu>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Today's Meals</div>
<div class="right weight">277.4 LBS</div>
</ons-toolbar>
<ons-list class="plan-list">
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date">7:00 AM</div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 1</div>
<div class="plan-info">
<ul>
<li>2 Chicken Breasts</li>
<li>Blueberries</li>
<li>Side Salad with Ranch</li>
</ul>
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 2</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 3</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 4</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</body>
I am not using this with cordova or phonegap. I am just using this as a framework for a mobile web page.
Thank you!
You just need to wrap the menu page and the main page with <ons-template> like this:
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
...
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-page>
...
</ons-page>
</ons-template>
Hope it helps!
I can't get the navigation to work with the tab bar. I have a list page, search page and details page. For some reason I can't get the list page to persist when navigating either. The details page is never shown even thought I am using app.navi.pushPage('detail.html'). Before adding the tab-bar everything worked fine. Any ideas on what I am doing wrong?
As well, I need to access the detail page from both the list and search pages.
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
<ons-tabbar>
<ons-tab page="favourites.html" label="Favourites" icon="fa-heart"></ons-tab>
<ons-tab page="list.html" label="Near Me" icon="fa-map-marker" active="true"></ons-tab>
<ons-tab page="search.html" label="Search" icon="fa-search"></ons-tab>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
You cannot combine <ons-navigator> with <ons-tabbar>. If you use the tabbar element, you can switch pages using setActiveTab(index, [options]). I created a working sample using the template you provided and added a <ons-button> in the list.html template that changes the active page. For more info about the tabbar element, take a look here. Let me know if you need more help :)
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="list.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="search.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="detail.html"></ons-tabbar-item>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
<ons-button id="btn-switch-search" ng-click="tabbar.setActiveTab(2)">Cancel</ons-button>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
</body>
I want to add a page before my sliding menu page. I succeeded to accomplish that. But, now I can't access menu.toggle();
I logged the menu object, that says undefined. And I've also tried navi.menu but that also doesn't seem to work. This is the closest solution I've got but no menu.toggle
Onsen UI - Using Slide-Menu just for specifics pages here is my code
<ons-navigator title="Navigation" var="navi" page="homePage.html">
</ons-navigator>
<ons-template id="homePage.html">
<ons-page ng-controller="mainPageController">
<ons-toolbar>
<div class="center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>Exit</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row class="home-page">
<ons-col>
<ons-list>
<ons-list-item modifier="tappable"
style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[2].status"
ng-click="navi.pushPage('home.html')">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-building" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Hotels</div>
<div class="description">Find the perfect hotel room</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[6].status || modules[7].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-plane" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Flights</div>
<div class="description">Get the best flight</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[3].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-briefcase" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Tours</div>
<div class="description">Your vacation awaits</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[1].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-car" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Cars</div>
<div class="description">Seek a deal on wheels</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[0].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-leanpub" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Blog</div>
<div class="description">Travel news portal</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<br><br>
<ons-list class="menu-list">
<ons-list-item menuitem class="menu-item selected" ng-click="menu.setMainPage('home.html', {closeMenu: true});">
<i class="glyphicon glyphicon-home"></i>
Home
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true});">
<i class="glyphicon glyphicon-calendar"></i>
Browse Hotels
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true});">
<i class="glyphicon glyphicon-gift"></i>
Special Offers
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('blog.html', {closeMenu: true});">
<i class="glyphicon glyphicon-th-list"></i>
Blog
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('mybookings.html', {closeMenu: true});">
<i class="glyphicon glyphicon-user"></i>
My Bookings
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('contactus.html', {closeMenu: true});">
<i class="glyphicon glyphicon-map-marker"></i>
Contact Us
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="home.html">
<!-- <ons-navigator var="nav"> -->
<ons-page ng-controller="homeController">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center text-center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>
<!-- <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> -->
<ons-icon icon="ion-load-c" ng-show="isFetching" spin="{{isFetching}}"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div>some text</div>
</ons-page>
</ons-template>
The methods toggle(), open() and close() for the sliding menu are deprecated.
You can use the toggleMenu([options]) method instead: http://onsen.io/reference/ons-sliding-menu.html#method-toggleMenu
It seems like you want a page before the sliding menu so I made a small example:
http://codepen.io/argelius/pen/XJOQwy
Im developing with onsen ui + angularjs. My app have to ways to access to different sections, one is for "home" page and another is for lateral menu. When i use "home" menu and i access to any items of my list works perfect, but if i use lateral menu and i try to access to any items chrome debugger show me this error:
TypeError: Cannot read property 'pushPage' of null
at Scope.$scope.showPost (http://recorramisiones.com.ar/rutadelaselva/app2/js/app.js:103:26)
at $parseFunctionCall (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:12133:18)
at http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15815:21
at Scope.$get.Scope.$eval (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14123:28)
at Scope.$get.Scope.$apply (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14221:23)
at HTMLElement.click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste.split.forEach.ngEventDirectives.(anonymous function).compile.listener (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15814:25)
at HTMLElement.eventHandler (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:3013:21)
My project url: http://recorramisiones.com.ar/rutadelaselva/app2/
Screenshot: http://puu.sh/g4Zr5.jpg
menu.html (lateral menu):
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
<ons-icon icon="fa-home" fixed-width="true"></ons-icon>
Inicio
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('areas.html', {closeMenu: true})">
<ons-icon icon="fa-leaf" fixed-width="true"></ons-icon>
Areas Naturales
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('informes.html', {closeMenu: true})">
<ons-icon icon="fa-info-circle" fixed-width="true"></ons-icon>
Informes Turísticos
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('atractivos.html', {closeMenu: true})">
<ons-icon icon="fa-camera" fixed-width="true"></ons-icon>
Atractivos y Actividades
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('alojamientos.html', {closeMenu: true})">
<ons-icon icon="fa-building" fixed-width="true"></ons-icon>
Alojamientos
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('hospitales.html', {closeMenu: true})">
<ons-icon icon="fa-plus-square" fixed-width="true"></ons-icon>
Hospitales y Servicios
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('markers.html', {closeMenu: true})">
<ons-icon icon="fa-map-marker" fixed-width="true"></ons-icon>
Mapa
</ons-list-item>
</ons-list>
</ons-page>
home.html (home menu)
<ons-navigator animation="slide" var="gallery">
<ons-page>
<ons-toolbar modifier="opacity">
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Ruta de la Selva</div>
</ons-toolbar>
<div class="app-page">
<div class="app-page-menu">
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('alojamientos.html');">
<img src="img/alojamientos.jpg">
<p>Alojamientos</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('informes.html');">
<img src="img/informes.jpg">
<p>Informes Turísticos</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('atractivos.html');">
<img src="img/actividades.jpg">
<p>Atractivos y Actividades</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('areas.html');">
<img src="img/areas.jpg">
<p>Áreas Naturales</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('dishes.html');">
<img src="img/hospitales.jpg">
<p>Hospitales y Servicios</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('markers.html');">
<img src="img/map.jpg">
<p>Mapa</p>
</ons-button>
</ons-col>
</ons-row>
</div>
</div>
</ons-page>
</ons-navigator>
Any idea?
In the case where you use the main page you push the list of places onto the navigator page stack. This works well because you can now push the next page on top of the page stack as well.
In the case when you use the menu you set the main page to the list of places (without a navigator). So when you click it can't push the page since there is no navigator.
Basically you can get to a page like "areas.html" in two different ways, one where you have a navigator and one where you don't. I would advice you to use one navigator per page and have the menu on top of everything so it's always available.