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>
Related
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.
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.
My use case:
Call JavaScript function from JS file (included in project) in Ionic 4 on particular page.
I'm having following issue.
ERROR TypeError: t.resolve is not a function
at Object.setNativePromise (polyfills.js:3)
at L.configurable.L.set (polyfills.js:3)
at n.exports (ocw.js:4850)
at a (ocw.js:4850)
at Object.209.100 (ocw.js:4851)
at s (ocw.js:4850)
at ocw.js:4850
at Object.327.131 (ocw.js:4852)
at s (ocw.js:4850)
at ocw.js:4850
Steps followed:
Included JS file under src->assets
added reference in index.html after cordova.js file
<!-- cordova.js required for cordova apps (remove if not needed) -->
<!-- <script src="assets/ocw.js"></script> -->
<script src="cordova.js"></script>
<script src="assets/ocw.js"></script>
In desired file, declared variable as function name
called javascript function under, ionViewDidLoad
Ionic setup:
Ionic:
ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 6.4.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 9 other plugins)
System:
ios-deploy : 1.9.2
ios-sim : 6.0.0
NodeJS : v8.12.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
You need to export the function in your javascript file and then import it in your pagename.page.ts to be able to use it.
I am using the camera preview plugin in my Ionic v1 app.
When I click Start Cam, the camera preview starts and When i Tap Swap Cam,
the $scope.swapCam() function gets called twice, i.e I can see console.log('swapping'); printing twice.
Have tested without CameraPreview.switchCamera();, works fine.
Any help appreciated. Thanks
This is my HTML
<ion-view view-title="Dashboard">
<ion-content class="padding">
<button ng-click="startCam()">Start Cam</button>
<button ng-click="swapCam()">Swap Cam</button>
</ion-content>
</ion-view>
and this is my Controller
.controller('DashCtrl', function($scope) {
$scope.startCam = function(){
CameraPreview.startCamera({x: 50, y: 50, width: 300, height: 300, toBack: false, previewDrag: true, tapPhoto: true});
}
$scope.swapCam = function(){
console.log('swapping');
CameraPreview.switchCamera();
}
})
ionic info:
#ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
cordova (Cordova CLI) : 6.5.0
Gulp CLI : CLI version 3.9.1 Local version 3.9.1
Cordova Platforms : android 6.1.2
Ionic Framework : ionic1 1.3.4
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.