Good evening beautiful community,
I'm having problems developing an app on Ionic. I started programming it on July, stopped on November, and when I tried to run it again this February, the ngIf didn't display correctly.
In addition to this, when I run the command Ionic serve, the browser runs the app correctly, on the first try. On the second, it doesn't display what I said earlier. When I run the command Ionic Cordoba run browser, or when I try to run the .apk in my phone, it displays a lot of errors.
The ngIf code is as follows:
<div *ngIf="option==1">
<ion-item lines="full">
<ion-label position="floating">text 1</ion-label>
<ion-input type="number" [(ngModel)]="something 1"></ion-input>
</ion-item>
<ion-item lines="full">
<ion-label position="floating">text 2</ion-label>
<ion-input type="number" [(ngModel)]="something 2"></ion-input>
</ion-item>
The text 1/2, something 1/2, and option==1 are something different in the code.
this is the Ionic im using:
Ionic CLI : 5.2.6
(C:\Users[myname]\AppData\Roaming\npm\node_modules\ionic) Ionic
Framework : #ionic/angular 4.11.10
#angular-devkit/build-angular : 0.801.3 #angular-devkit/schematics
: 8.1.3 #angular/cli : 8.1.3
#ionic/angular-toolkit : 2.0.0
What should I do? Any help will be appreciated.
I Think there might be something wrong on the Ionic side of this, because the code used to work perfectly. Maybe a new update messed things up?
Thanks in advance.
Related
I've changed the
#media (prefers-color-scheme: dark) in variables.css to a dark class and I'm checking to change to it with window.matchMedia('(prefers-color-scheme: dark)').matches in typescript. I also have a toggle to change it inside the app. Everything works fine, except some of ion-modal elements (which are inside ng-template), like this:
<ion-modal>
<ng-template>
<ion-label>
test
</ion-label>
<ion-text>
test
</ion-text>
</ng-template>
</ion-modal>
they are still obeying the device's dark mode, meaning that when I toggle to light mode inside a device that is set to dark mode, the text color stay white while the modal color turns white, make the text invisible. I don't understand if there is something I'm missing here.
I've tried to fix each of their colors manually as a temporary fix, but that might cause other problems and would make my code dirty. I'd appreciate it if anyone can point to me what I am missing here or what is the correct fix for having them follow my dark mode not the device's. here is my Ionic info:
Ionic:
Ionic CLI : 6.17.1
Ionic Framework : #ionic/angular 6.1.9
#angular-devkit/build-angular : 14.2.6
#angular-devkit/schematics : 13.2.6
#angular/cli : 14.2.6
#ionic/angular-toolkit : 6.1.0
Capacitor:
Capacitor CLI : 3.5.1
#capacitor/android : 3.5.1
#capacitor/core : 3.5.1
#capacitor/ios : 3.5.1
Utility:
cordova-res : 0.15.4
native-run : 1.6.0
System:
NodeJS : v16.15.1
npm : 8.12.1
OS : Windows 10
I have a standard Ionic IonSelect set up as in the following...
<ion-item lines='none'>
<ion-label>Location</ion-label>
<ion-select type="text" placeholder='select...'>
<ion-select-option *ngFor='let p of places' value="{{p.id}}">
{{p.description}}
</ion-select-option>
</ion-select>
</ion-item>
My problem is that it can only handle quite short text until it starts to truncate, eg:
It looks like the label and selected values want to use 50% of the space each.
Is there a way to make this text move to the left, almost all the way up to the label?
Ionic info:
$ ionic info
Ionic:
Ionic CLI : 5.2.3 (C:\Users\pchapman\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.11.2
#angular-devkit/build-angular : 0.802.0
#angular-devkit/schematics : 8.2.0
#angular/cli : 8.2.0
#ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0, windows 6.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 12 other plugins)
Utility:
cordova-res : 0.7.0-testing.0
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (C:\Users\pchapman\AppData\Local\Android\sdk)
NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
Update
Tried using the float as suggested, but I get:
I just found your question while looking for the same. After some time trying to find useful hints unsuccessfully, I thought on providing my findings for future coders that will end up here as you might have solved your issue already.
TL;DR
the quickest fix for the ion-select alignment is to set up position on the label like this
<ion-label position="floating">Location</ion-label>
so it ends up as
<ion-item lines='none'>
<ion-label position="floating">Location</ion-label>
<ion-select type="text" placeholder='select...'>
<ion-select-option *ngFor='let p of places' value="{{p.id}}">
{{p.description}}
</ion-select-option>
</ion-select>
it will work with position floating or stacked, as it will wrap a new line for the select result.
This way you get still the same ionic components without many modifications and still solve the UI disarray.
Please find my below ionic info command
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 1.3.12
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.5.0
System:
ios-deploy : 1.9.2
Node : v6.11.2
npm : 3.10.10
OS : macOS High Sierra
Xcode : Xcode 9.0 Build version 9A235
here is my code.
<div style="position: absolute; bottom: 0px;">
<img src="assets/login/welcome_login_bg.png" />
<ion-list style="position: initial">
<form [formGroup]="loginForm">
<ion-item no-padding class="firstItem">
<ion-input [(ngModel)]="username" formControlName="username" type="email" spellcheck="false" autocapitalize="off">
</ion-input>
</ion-item>
<ion-item no-padding class="borderlineremove">
<ion-input [(ngModel)]="password" formControlName="password" clearOnEdit="false" type="password" spellcheck="false" autocapitalize="off">
</ion-input>
</ion-item>
<button class="loginForm" ion-button (click)="validateUser()" full color="danger">
<b>Sign In</b>
</button>
<ion-row>
<div class="forgotPwd"><span (click)="forGotPwd()">Forgot Password?</span></div>
<div class="signUp"><span (click)="registration()">Sign Up</span></div>
</ion-row>
</form>
</ion-list>
</div>
Issue:
When i focus on the keyboard i am not able to move the form above the keyboard until some input is given but in android everything works fine.
I use ionic thumbnail list like the document said:
```
<ion-item>
<ion-thumbnail item-start>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>
```
I copied same code to my project, when it didn't render correctly.
My list view show like belwo:
And i checked the html ion-item and ion-thumbnail generate is
It doesn't like ionic example. the ion-thumbnail directive incorrectly wrapped by ion-label.
I don't know what happen, below is my ionic info
```
cli packages:
#ionic/cli-plugin-cordova : 1.5.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-cordova)
#ionic/cli-plugin-ionic-angular : 1.4.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-ionic-angular)
#ionic/cli-utils : 1.6.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-utils)
ionic (Ionic CLI) : 3.6.0 (/Applications/My-Project/sharemap/node_modules/ionic)
global packages:
Cordova CLI : 6.4.0
local packages:
#ionic/app-scripts : 1.3.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.0.1
System:
Android SDK Tools : 26.0.2
Node : v6.10.1
OS : macOS Sierra
Xcode : Xcode 8.3 Build version 8E162
ios-deploy : 1.8.1
ios-sim : 5.0.6
npm : 3.10.3
```
What's wrong with my code?
i found the solution:
I change the item-start directive to item-left, then problem solved.
i don't why this directive not work like Ionic Document said.
And I also found that item-end not work like document either. You need to change to item-right.
The right code is below:
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>
Confirming that i have updated Ionic to 1.1.1, so assuming the iOS9 webview patch is included in it. However, i am still facing issues with side menus onclick of which i am invoking $state.go() which does not render the actual page & reverts to original state. UI is completely broken.
Below is the system information:
Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.1.1
Ionic CLI Version: 1.7.10
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.3
ios-sim version: 5.0.3
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.1.1 Build version 7B1005
HTML Code in the side menus:
<ion-item menu-close href="#" ng-click="getWishlist()" ng-if="userId && userId != ''">
<div class="row">
<div class="col col-20">
<i class="ion-heart"></i>
</div>
<div class="col col-80">
My Wishlist
</div>
</div>
</ion-item>
JS Code in getWishlist():
$scope.getWishlist = function (){
$state.go("app.wishlist", {}, {reload: true});
}
Help appreciated!
Note: Static URL invocations within menu seem to work just fine!
<ion-item nav-clear menu-close href="#/app/contact-us" >
<div class="row">
<div class="col col-20">
<i class="ion-ios-telephone"></i>
</div>
<div class="col col-80">Contact Us
</div>
</div>
</ion-item>
Well, i guess it was my bad for not reading this post properly!
I figured the issue was due to href='#'. The post does mention to remove empty href links if necessary which invoke the otherwise state in iOS 9. Once i removed them the links started to work as expected.
However, i still had to alter my CSS to make the side menus look proper.