I have set up ionic environment
1) node and npm
2) cordova and ionic with sidemenu template
While using the ionic 4 components in the application its classes are not working
You can see it shows button without css.
Any help is appreciated.
Thank you
Components are working, I can see <ion-content> and <ion-header> in the console. probably you css is not working , try this in html
<ion-content padding>
<button ion-button class="btn">My button</button>
</ion-content>
and in scss
.btn{
background: red;
}
you can change the css property it this btn class and it should reflect when running the app
I'm working with Ionic 3 on iOS 11. Ever since upgrading to iOS 11, my buttons don't work inside Modals. Specifically speaking, the (click) events don't trigger:
HTML:
<button ion-button (click)="logoutUser()">LOGOUT3</button>
JS:
logoutUser() {
console.log('Logout the user');
}
Does anyone have any idea what might be wrong here?
Make sure you add a z-index to the outer most box in which your button resides.
I was searching for informations about IONIC 2 grid but I didn't find complex description of it. I've got some questions:
Can I include one <ion-grid> inside another <ion-grid>?
If I have some modules can I build grid for every module separately?
If not maybe I should declare <ion-grid> higher in DOM than modules and in modules operate only on <ion row> and <ion-col>
I find something like that:
<div class="row"><div class="col-6"></div><div class="col-6"></div>
</div>
Is that IONIC (maybe the old one)?
In IONIC2 it should look like:
<ion-row">
<ion-col col-6"></ion-col>
<ion-col col-6"></ion-col>
</ion-row>
Am I right?
PS. Thats my first post on stackoverflow :D Jupi!!
Can I include one inside another ?
Yes you can, but I haven't seen a use case where this was required.
If I have some modules can I build grid for every module separately?
Yes you can, you should see <ion-grid> the same as any other Ionic component like <ion-item> or <ion-card>. Use them as much as you need them in any module.
I find something like that:
<div class="row"><div class="col-6"></div><div class="col-6"></div>
</div>
This is the old version of the , proper use and more information about the <ion-grid> component can be found here
In my ionic app, the ion-input simply not render and I don't discovered why, yet.
For example, this code not render:
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
Just the Floating Label appears, but the input effect not works and I cannot type anything.
What am I forgetting?
And more, the input style using the input tag is in bold, and in my own css am not changing the default style.
I am also facing same issue. After googling, came to know this not work in Ionic 1. Ionic version 1 will not support ion-iput. This is supporting from Ionic 1 later versions like ionic 2,etc.
I think that you did not create an Ionic2 application !
After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:
$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave
Documentation: (http://ionicframework.com/blog/navigating-the-changes/)
Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?
Events Fired:
$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter
I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.
<div ng-controller="fbMenuController">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content scroll="true">
<div ng-repeat="Group in fb.Model.MenuGroups">
<ion-item class="item-divider">{{Group.Name}}</ion-item>
<!-- href="#/Main/{{Page.Name}}" -->
<a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
{{ Page.Name }}
</a>
</div>
</ion-content>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
<div class="buttons">
<button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
</div>
<h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
</ion-header-bar>
<ion-content scroll="true">
<ion-nav-view name="Main">
</ion-nav-view>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</div>
If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:
$scope.$on("$ionicNavView.leave")
This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".
On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.
Solution:
On MAIN controller I added:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (fromState.name === 'name-of-leaving-state') {
//your code here, similar behavior with .$on('$ionicView.leave')
}
});
Hope it helps
I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:
If a view leaves but is cached, then this event will not fire again on
a subsequent viewing.
It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.
See docs here.
Found the problem. The 'Main' state was defined without the attribute
abstract: true
this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.
I know this is quite old, however i wanted to add that on Ionic v1.3.4 (the last version) the $ionicView.beforeEnter && $ionicView.afterEnter all work. I mention this because others have commented that v1.3.x was having issues with controller views for .beforeEnter and .afterEnter. But I don’t ever recall having issues on any version of 1.3.x.
That being said, I came to this thread because I am updating an older ionic v1 app and ran into a problem where the $ionicView.beforeEnter was not firing and I could not figure out why. It turns out the template that goes with that controller was missing closing HTML tags on a few <i class="icon> elements…I didn’t add the closing </i>
Thus, apparently, certain elements missing a closing tag was preventing the controller $ionicView.beforeEnter/afterEnter functions from firing. Don't know if its all tags or specific tags but I can say I had NEVER seen that before so it took me a while to figure out the issue was in my template and not in my controller.
For what its worth, hope my discovery helps those in the future.