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
Related
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
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'm using ngx translate for translation in my ionic 4 project. But when i try to run:
ionic cordova build android -prod
Throws this error:
ERROR in Illegal State: referring to a type without a variable {"filePath":"C:/XXX/XXX/XXX/XXX/PROJECTNAME/node_modules/#ngx-translate/core/ngx-translate-core.d.ts","name":"TranslatePipe","members":[]}
[ERROR] An error occurred while running subprocess ng
My ionic info:
Ionic:
Ionic CLI : 5.2.7 (C:\Users\USER\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.9.0
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.6.0
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (C:\Users\USER\AppData\Local\Android\Sdk)
NodeJS : v12.5.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Please help!!!
The accepted answer is a solution to avoid the problem, but when a production build is needed, things are looking bad.
Workaround to achieve this is to access your tsconfig.json and disable fullTemplateTypeCheck to false. Include it, if you can not find it.
"angularCompilerOptions": {
"fullTemplateTypeCheck": false,
...
},
This error actually means that a reference failure is present among your components and modules. That could be a dupliate reference in a module or and submodule or any the like. This would result in ommiting to make a needed variable available. In your case that is the variable of ngx-translate (which your either call in the template or component file).
Setting the fullTemplateTypeCheck to false will help you to get the insights (including code line) about your false module references. But you must fix it yourself. Usually an easy fix. If you are uncertain, run again ng build --prod --verbose to see get more indications about the false relations.
you do not need to write -prod because it converts the file into minified version so device to hard to read. u just need run without -prod
ionic cordova build android
if you want a release APK just run
ionic cordova build android --release
after that, u do not face any issue.
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.