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
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
How can I implement zoom functionality in a native qr scanner? I tried installing the camera preview plugin but it keeps crashing the app. The new versions probably do not support it. My project version:
Ionic:
Ionic CLI : 5.2.5(C:\Users\Ivo\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework :
#ionic/angular : 4.11.5
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.1.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.8.1
native-run : 0.2.9
System:
Android SDK Tools : 26.1.1 (C:\Users\Ivo\AppData\Local\Android\Sdk)
NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
I have tried so far:
to install camera preview plugin but it is not supported by this ionic version
searched for a QRScanner method, but wasn't able to find one. Found methods only for flashlight and rotating camera.
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.
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.
I'm trying to use the variables defined on the variables.scss file, but remote debugging the app i see that no variable was defined on :root and on the elements that use it has Invalid value.
variables.scss
:root {
/** primary **/
--ion-color-primary: #d76f47;
... more variables
}
page.scss:
.product-name {
color: var(----ion-color-primary);
}
angular.json (untouched)
...
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
...
This only happens while runing on the device (Android 4.4.2).
While on the browser everything works as it should be.
Ionic:
ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.0.0-beta.16
#angular-devkit/build-angular : 0.10.6
#angular-devkit/schematics : 7.0.6
#angular/cli : 7.0.6
#ionic/angular-toolkit : 1.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.2, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 6 other plugins)
System:
Android SDK Tools : 26.1.1
NodeJS : v9.10.1 (/usr/local/bin/node)
npm : 6.2.0
OS : Linux 4.15
Thanks in advance.
If you want to change color for your custom dom
.product-name {
color: var(--ion-color-primary);
}
but for the dom that has shadow root maybe you should to confirm if it has variable
dom-name {
--color: var(----ion-color-primary); //if dom declare --color as css4 variable
}