Ionic 4 IonSelect selected value text truncates way too soon - ionic-framework

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.

Related

Ionic ion-modal text color is according to device's dark mode not the app's dark mode

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

ion-select selected option too long

Trying to style the length of the selected label for some reason it doesn't tuncate and is pushing the ion-select to be larger than the screen making the element hit the side of the screen.
Selected option is too long
<ion-select placeholder="How did you hear about us?">
<ion-select-option>Recommendation - Children's Centre</ion-select-option>
<ion-select-option>Recommendation - Hospital</ion-select-option>
<ion-select-option>Recommendation - Local Authority / Social Services</ion-select-option>
</ion-select>
ion-select {
border:1px solid #ccc;
border-radius: 5px;
height:38px;
--padding-start:10px;
outline:0;
width: 100%;
max-width:100%;
}
If I add display block to the ion-select that semi solves it but then drops the arrow on the select underneath.
Just need it to truncate the selected option if it is too large but when I inspect it, it shows label is within the #shadow-root which I can't get to, to style it.
Any help would be great.
Ionic:
Ionic CLI : 6.17.1 (C:\Users\Me\AppData\Roaming\npm\node_modules#ionic\cli)
Ionic Framework : #ionic/angular 5.6.13
#angular-devkit/build-angular : 12.1.4
#angular-devkit/schematics : 12.1.4
#angular/cli : 12.1.4
#ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.3.2
#capacitor/android : 3.3.2
#capacitor/core : 3.3.2
#capacitor/ios : 3.3.2
Utility:
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v14.17.6 (C:\Program Files\nodejs\node.exe)
npm : 6.14.15
OS : Windows 10

Using Ionic, when running ngIf, a drop down menu should appear, and it doesnt

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.

Ionic 4. How change header background color on old android versions

I tried to use css variables for this
ion-toolbar {
--background: #{$backgroundColor3};
--min-height: #{$spacing * 5};
}
All works correct in latest chrome and on android 8. But on adnroid 5 with chrome 40.* it is not worked.
I found that minimal android version for Ionic is 4.4 docs
>ionic info
Ionic:
Ionic CLI : 5.0.1
Ionic Framework : #ionic/angular 4.4.2
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.3.9
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 9 other plugins)
Utility:
cordova-res : 0.3.0
native-run : 0.2.5
System:
Android SDK Tools : 26.1.1 (C:\Android)
NodeJS : v11.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Background is only one problem with styles:
Screenshot with issues from android 5
Normal screenshot
You need to be use add in global or page .scss file
--background: var(--ion-color-primary);
Here your answare.

Ionic Thumbnail List render incorrectly

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>