Hello Everyobody,
I’m using Ionic rc.1. When i see the app with Ionic View in iOS, the side menu is like in top of the content, and is almost impossible to open it. In Android everything is Ok and in the browser as well.
Is there any known issue about this?
###EDIT:
This is exactly what’s happening:
Look, the nav header is pushed down.
This is how it should look, (and how it looks in android and the browser)
Thanks in advance.
Could you provide a codepen ? (or simply some code)
Thanks!
Yes. here you have:
##index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/utils.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="app">
<ion-header-bar class="bar-stable">
<img class="title-image-left" src="img/banner_left.png" /><img class="title-image-middle" src="img/banner_middle.png" /><img class="title-image-right" src="img/banner_right.png" />
</ion-header-bar>
<ion-nav-view class="has-header"></ion-nav-view>
</body>
</html>
##Menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content class="has-subheader">
<ion-nav-bar class="bar-stable bar-header">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menú</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/comentarios">
<i class="icon ion-chatbubbles positive"></i>
Comentarios
</ion-item>
<ion-item item-type="item-icon-left" nav-clear menu-close href="#" ng-click="compartir()">
<i class="icon ion-android-share positive"></i>
Compartir
</ion-item>
<ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/informacion">
<i class="icon ion-information-circled positive"></i> Informacion
</ion-item>
<ion-item item-type="item-icon-left"nav-clear menu-close href="#/app/notificaciones">
<i class="icon ion-radio-waves positive"></i> Notificaciones
</ion-item>
<ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/sponsors">
<i class="icon ion-person-stalker positive"></i> Sponsors
</ion-item>
<ion-item item-type="item-icon-left"nav-clear menu-close href="#" ng-click="salir()">
<i class="icon ion-log-out positive"></i> Salir
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Hope it helps…
It’s really weird this, normally all the issues I had were with Android, not with iOS
Weird, I didn’t see anything wrong with the code, it’s hard to tell what’s wrong since I can’t replicate the bug myself. Did you use ionic start myApp sidemenu (on getting started)? I use it myself and never had problems.
I used sidemenu start because it’s a side menu.
It’s like the menu is behind the main content and like the main content is pushed down… but I dont know why… f*ck…
I’m sorry I meant sidemenu like you said, Is your app open source? Can I take a look?
Sorry is not open source… But i can share some snippets with you…
Ask me whatever you think it could be. I’m triying with the default sideMenu and always is perfect. This is a extrange thing,
I’m going to try to replicate the problem in this new app to see what happens
thanks
Could you put together an example in a codepen that is similar to what you have setup?
here you have more or less what i have:
go to the card page with the menu and you’ll see more or less my layout:
Hmm, the codepen doesn’t seem to be having the issue.
Yes, the issue only happens in iOS… (through the Ionic View app)
##Edit:
Look at the first post, the images.
Still not seeing it, and this was on ios inside the ionic-view app.
Maybe there some custom css that is causing the issue?
I have dissabled all the css classes i have and it is still happening…
It’s like there’s something between the fixed bar and the navigation bar, a white space…