@niravparsana94 wrote:
Hello,
I’m showing some message in AlertController. Issue is when there is new line in message, last word is splits into 2 words.
See below image for reference:
Issue: ‘version’ word is splits to ‘versi’ & ‘on’(goes to new line).
Expected behavior: if whole word ‘version’ can’t fit into same line, it should display in new line as whole word ‘version’.Thanks,
Nirav
Posts: 1
Participants: 1
@vasanthb wrote:
Hi All, I’m very new to E2E testing. I want implement end to end testing of my Ionic 4 application. Want to know what is best way or tool to use for that. If Appium is your answer, can I use it for all the native interactions like camera, Geo-location, Making API calls etc ?
My app has many native functionalities considering that, kindly suggest me, what approach I need to use and share the useful links with that regard.
Posts: 1
Participants: 1
@YXUN wrote:
Hi all,
I am looking for advice on what is the best code or way to create a POP-UP FORM that requires users to fill up the details ONLY ONCE after installing the application.
Basically, after users install the application from play/app store, a pop-up form will pop out and they MUST fill in the details in the form and will only be able to use the app after clicking the submit button ONLY ONCE.
Something like a login page which only comes out once, but I do not need my users to register an account however I need them to fill in a form in order to proceed.
Any suggestions?
Any help is appreciated, Thanks!
Posts: 1
Participants: 1
@chameera1 wrote:
anyone who has experience with the ionic 3 apps remove the app event in ios.
I integrate firebase analytics into my app to find out how many peoples uninstall the application. is worked in android.but in ios it’s not work do anyone know the problem.
Posts: 1
Participants: 1
@Hyonta wrote:
I’m migrating source code from ionic3 to ionic4.
After migrating the source code, the following error occurs when building.
Please tell me how to solve it.
- error contents
ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/global.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js): color: color($colors, text_gray); ^ Undefined variable: "$colors". in .\src\app\app.scss (line 75, column 18) Error: color: color($colors, text_gray); ^ Undefined variable: "$colors". in .\src\app\app.scss (line 75, column 18) at options.error (.\node_modules\node-sass\lib\index.js:291:26) @ ./src/global.scss 1:14-241 @ multi ./src/theme/variables.scss ./src/global.scss
- package.json
{ "name": "v4blank-temp", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-devkit/build-angular": "^0.803.23", "@angular/common": "~8.2.14", "@angular/core": "8.2.14", "@angular/forms": "~8.2.14", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", "@ionic-native/android-permissions": "^5.20.0", "@ionic-native/app-version": "^5.20.0", "@ionic-native/calendar": "^5.20.0", "@ionic-native/core": "^5.20.0", "@ionic-native/dialogs": "^5.20.0", "@ionic-native/geolocation": "^5.20.0", "@ionic-native/globalization": "^5.20.0", "@ionic-native/google-analytics": "^5.20.0", "@ionic-native/in-app-browser": "^5.20.0", "@ionic-native/location-accuracy": "^5.20.0", "@ionic-native/native-storage": "^5.20.0", "@ionic-native/network": "^5.20.0", "@ionic-native/open-native-settings": "^5.20.0", "@ionic-native/social-sharing": "^5.20.0", "@ionic-native/splash-screen": "^5.20.0", "@ionic-native/status-bar": "^5.20.0", "@ionic/angular": "^4.11.10", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "angular-linky": "^1.2.2", "claimtypes": "^0.1.0", "cordova-android": "^8.1.0", "cordova-ios": "^5.1.1", "core-js": "^3.6.4", "es6-promise-plugin": "^4.2.2", "rxjs": "^6.5.4", "rxjs-compat": "^6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/architect": "^0.803.23", "@angular-devkit/core": "^8.3.23", "@angular-devkit/schematics": "^8.3.23", "@angular/cli": "^8.3.23", "@angular/compiler": "~8.2.14", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@ionic/angular-toolkit": "^2.1.2", "@types/jasmine": "^3.5.1", "@types/jasminewd2": "~2.0.8", "@types/node": "^13.5.0", "codelyzer": "^5.2.1", "com-sarriaroman-photoviewer": "^1.2.4", "cordova-open-native-settings": "^1.5.2", "cordova-plugin-android-permissions": "^1.0.2", "cordova-plugin-app-version": "^0.1.9", "cordova-plugin-calendar": "^5.1.5", "cordova-plugin-device": "^2.0.3", "cordova-plugin-dialogs": "^2.0.2", "cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-globalization": "^1.11.0", "cordova-plugin-google-analytics": "^1.8.6", "cordova-plugin-inappbrowser": "^3.2.0", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.1.3", "cordova-plugin-nativestorage": "^2.3.2", "cordova-plugin-network-information": "^2.0.2", "cordova-plugin-request-location-accuracy": "^2.3.0", "cordova-plugin-splashscreen": "^5.0.3", "cordova-plugin-statusbar": "^2.4.3", "cordova-plugin-whitelist": "^1.3.4", "cordova-plugin-x-socialsharing": "^5.6.3", "cordova-plugin-x-toast": "^2.7.2", "css-loader": "^0.28.10", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.4.1", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.1", "karma-jasmine": "~3.1.0", "karma-jasmine-html-reporter": "^1.5.1", "node-sass": "^4.13.1", "protractor": "~5.4.2", "sass-loader": "^7.1.0", "ts-node": "~8.6.2", "tslint": "~6.0.0", "typescript": "~3.5.0" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {}, "cordova-plugin-android-permissions": {}, "cordova-plugin-app-version": {}, "cordova-plugin-dialogs": {}, "cordova-plugin-geolocation": { "GEOLOCATION_USAGE_DESCRIPTION": "To locate you" }, "cordova-plugin-globalization": {}, "cordova-plugin-nativestorage": {}, "cordova-plugin-network-information": {}, "com-sarriaroman-photoviewer": {}, "cordova-open-native-settings": {}, "cordova-plugin-x-socialsharing": { "ANDROID_SUPPORT_V4_VERSION": "24.1.1+", "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.", "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly." }, "cordova-plugin-x-toast": {}, "cordova-plugin-google-analytics": { "GMS_VERSION": "11.0.1" }, "cordova-plugin-calendar": { "CALENDAR_USAGE_DESCRIPTION": "This app uses your calendar", "CONTACTS_USAGE_DESCRIPTION": " " }, "cordova-plugin-request-location-accuracy": { "PLAY_SERVICES_LOCATION_VERSION": "16.+" }, "cordova-plugin-inappbrowser": {} }, "platforms": [ "ios", "android" ] } }
- ionic info
Ionic: Ionic CLI : 5.4.6 (C:\Users\yosuke.yasui\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.11.10 @angular-devkit/build-angular : 0.803.23 @angular-devkit/schematics : 8.3.23 @angular/cli : 8.3.23 @ionic/angular-toolkit : 2.1.2 Cordova: Cordova CLI : 9.0.0 (cordova-lib@9.0.1) Cordova Platforms : not available Cordova Plugins : not available Utility: cordova-res : not installed native-run : not installed System: NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe) npm : 6.13.0 OS : Windows Server 2016
Posts: 1
Participants: 1
@swatidashora wrote:
Hi,
I am working on an app which uses cordova-plugin-geolocation service to track live location of logged in users. It works fine if app is in foreground. But when we minimize the app, it stops tracking after specific time(5 minutes or something). To resolve this problem , I change battery sever mode to “No restrictions” manually in phone.
So I am facing two major issues here -
- I can not change settings manually in each user’s phone. So please suggest if there is any way in ionic 4 to do this through code.
- When I change setting manually the app works fine, but android automatically kill the app during phone call or any kind of notification.
Please suggest me how can I fix the above problems .
Thanks in advance.
Posts: 1
Participants: 1
@ayubIonicpro wrote:
Respected Ionic community,
I’ve a dual screen Android device(point of sale) Monitor which have two screens and show data separately using Android native app. I want to create my own ionic app to handle both screens. Can anyone help me out in this matter !? I tried to find plugins but unable to find one.
Thank you
Posts: 1
Participants: 1
@Marko-Matijevic wrote:
Is it possible to change Ion-fab-button close icon class inside shadow dom?
I have tried with everything, editing inside globals.scss, using ::ng-deep but still doesn’t work.
Please help!!
![test]()
Posts: 1
Participants: 1
@loucif wrote:
Hi,
can anyone help me please : i want to validate data in form #form-1 ,then pass it to #form-2 and submite the all there!
Posts: 1
Participants: 1
@lsantaniello wrote:
I need to integrate Google Analytics into my Ionic 3 App.
I installed native plugin but I can’t fount Google Tracking Id. In my google Analitycs page, tracking info are is not present.Help me please
Thanks
Posts: 1
Participants: 1
@YXUN wrote:
Hi there, I would like to make a page to be viewed only for FIRST TIME USERS when starting the app.
Did lots of research but couldn’t find any helpful ones.
Please assist. Any help is appreciated.
Thanks!
Posts: 1
Participants: 1
@jclaude wrote:
Hello !
On my app ! I would like in the toolbar , the title, centered and a button link to the my LinkedIn page
but my problems are : the title is not centered when I put the button, and sometimes, it will be again centered ?
The second, is , when i click the button, it open linkedin, and immediatly it close linkedin for openning the page in my Safari appIonic version : 5.4.5
thx all !
<ion-header> <ion-toolbar class="new-background-color"> <ion-buttons slot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title class="ion-text-center" style="color:white"> Accueil </ion-title> <ion-button class="ion-button-block-outline icon-only" fill="" color="transparent" class="ion-float-right" href="https://www.linkedin.com/company/xxxxx" target="blank_"> <ion-icon name="logo-linkedin" class="ion-float-right" style="color:white"></ion-icon> </ion-button> </ion-toolbar> </ion-header>
Posts: 1
Participants: 1
@mfruehauf-mse wrote:
(please read till the end, my question is there)
I’m using dynamic components from Angular in my Ionic project to build dynamic pages. I created a component for a collapsible container and one each for ion-grid, ion-row and ion-col.
Collapsible container:
<div> <ion-item lines="none" (click)="setOpen(!isOpen)" color="primary" style="margin-bottom: 4px;"> <ion-icon *ngIf="isOpen" name="arrow-dropdown"></ion-icon> <ion-icon *ngIf="!isOpen" name="arrow-dropup"></ion-icon> <ion-label>{{title}}</ion-label> </ion-item> <div [hidden]="!isOpen" style="padding-left: 20px; padding-right: 20px;"> <ng-template #container></ng-template> </div> </div>ion-grid:
<ion-grid> <ng-template #grid></ng-template> </ion-grid>ion-row:
<ion-row> <ng-template #row></ng-template> </ion-row>ion-col:
<ion-col [size]="size"> <ng-template #col></ng-template> </ion-col>When nesting them and placing content into the last child (ion-col), i get this, which doesn’t look like a grid anymore:
This is the generated HTML:<app-dyn-collapsable-container _nghost-iig-c7=""> <div _ngcontent-iig-c7=""> <ion-item _ngcontent-iig-c7="" color="primary" lines="none" style="margin-bottom: 4px;" ng-reflect-color="primary" ng-reflect-lines="none" class="item-label ion-color ion-color-primary item md item-lines-none ion-focusable hydrated"> <!--bindings={ "ng-reflect-ng-if": "true" }--> <ion-icon _ngcontent-iig-c7="" name="arrow-dropdown" ng-reflect-name="arrow-dropdown" role="img" class="md hydrated" aria-label="arrow dropdown"></ion-icon> <!--bindings={ "ng-reflect-ng-if": "false" }--> <ion-label _ngcontent-iig-c7="" class="sc-ion-label-md-h sc-ion-label-md-s md hydrated">Test</ion-label> </ion-item> <div _ngcontent-iig-c7="" style="padding-left: 20px; padding-right: 20px;"> <!----> <app-dyn-grid _nghost-iig-c8=""> <ion-grid _ngcontent-iig-c8="" class="md hydrated"> <!----> <app-dyn-grid-row _nghost-iig-c9=""> <ion-row _ngcontent-iig-c9="" class="md hydrated"> <!----> <app-dyn-grid-row-col _nghost-iig-c10=""> <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);"> <!----> <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 1</span></app-dyn-input> </ion-col> </app-dyn-grid-row-col> <app-dyn-grid-row-col _nghost-iig-c10=""> <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);"> <!----> <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 2</span></app-dyn-input> </ion-col> </app-dyn-grid-row-col> <app-dyn-grid-row-col _nghost-iig-c10=""> <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);"> <!----> <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 3</span></app-dyn-input> </ion-col> </app-dyn-grid-row-col> <app-dyn-grid-row-col _nghost-iig-c10=""> <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);"> <!----> <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 4</span></app-dyn-input> </ion-col> </app-dyn-grid-row-col> <app-dyn-grid-row-col _nghost-iig-c10=""> <ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);"> <!----> <app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 5</span></app-dyn-input> </ion-col> </app-dyn-grid-row-col> </ion-row> </app-dyn-grid-row> </ion-grid> </app-dyn-grid> </div> </div> </app-dyn-collapsable-container>But when placing the grid directly in the collapsible container, I get the following (and expected) output:
<div> <ion-item lines="none" (click)="setOpen(!isOpen)" color="primary" style="margin-bottom: 4px;"> <ion-icon *ngIf="isOpen" name="arrow-dropdown"></ion-icon> <ion-icon *ngIf="!isOpen" name="arrow-dropup"></ion-icon> <ion-label>{{title}}</ion-label> </ion-item> <div [hidden]="!isOpen" style="padding-left: 20px; padding-right: 20px;"> <!-- <ng-template #container></ng-template> --> <ion-grid> <ion-row> <ion-col size="6">col 1</ion-col> <ion-col size="6">col 2</ion-col> <ion-col size="6">col 3</ion-col> <ion-col size="6">col 4</ion-col> <ion-col size="6">col 5</ion-col> </ion-row> </ion-grid> </div> </div>
With folling generated HTML:<app-dyn-collapsable-container _nghost-tfd-c7=""> <div _ngcontent-tfd-c7=""> <ion-item _ngcontent-tfd-c7="" color="primary" lines="none" style="margin-bottom: 4px;" ng-reflect-color="primary" ng-reflect-lines="none" class="item-label ion-color ion-color-primary item md item-lines-none ion-focusable hydrated"> <!--bindings={ "ng-reflect-ng-if": "true" }--> <ion-icon _ngcontent-tfd-c7="" name="arrow-dropdown" ng-reflect-name="arrow-dropdown" role="img" class="md hydrated" aria-label="arrow dropdown"></ion-icon> <!--bindings={ "ng-reflect-ng-if": "false" }--> <ion-label _ngcontent-tfd-c7="" class="sc-ion-label-md-h sc-ion-label-md-s md hydrated">Test</ion-label> </ion-item> <div _ngcontent-tfd-c7="" style="padding-left: 20px; padding-right: 20px;"> <ion-grid _ngcontent-tfd-c7="" class="md hydrated"> <ion-row _ngcontent-tfd-c7="" class="md hydrated"> <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 1</ion-col> <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 2</ion-col> <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 3</ion-col> <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 4</ion-col> <ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 5</ion-col> </ion-row> </ion-grid> </div> </div> </app-dyn-collapsable-container>My question now is:
It seems the extra tags created (like “app-dyn-grid-row”) interfer somehow with the grid system, is there a way to fix this?
Posts: 1
Participants: 1
@mcihak wrote:
Hi there,
I have an app on ionic 4 and on the first page after initialization I have a modal. Problem is, when I open this modal and then click on HW back button on android, the app closes.Is there a way, how to prevent app closes in this case?
Thanks
Posts: 1
Participants: 1
@Catweazle101 wrote:
Hi
I’m just starting to customize styles of my app because it seems so easy if I believe to the documentation
But sadly already the simplest things doesn’t work.1. I changed the the background color of the whole app which worked (variables.scss)
:root { --ion-background-color: green; }2. I tried to change the background of ion-card as well
ion-card { --background: yellow; }but this rule has no impact and does not change the background of my ion-card?!
according the documentation there is a css-custom-property ‘–background’ for ion-cardI also saw some strange behavior when I was investigating the rendered DOM of my page.
Where is this strange class ‘.sc-ion-card-ios-h’ coming from?
Posts: 2
Participants: 1
@jhc1982 wrote:
I am on my first Ionic build and have come unstuck with routing. Usually, I just check if there is a valid user, if so I render logged in routes, if not I render auth routes, both in a Switch.
I have tried this approach in Ionic but I just get a blank screen.
I have put a S/O question here: https://stackoverflow.com/questions/59957805/how-can-i-conditionally-render-routes-and-redirect-on-prop-changes-with-react-io
I really just need to know how to render routes dynamically and redirect on a successful user prop rerendering the app.
Thanks in advance.
Posts: 1
Participants: 1
@dnietoandres wrote:
Hi there, I was wondering if someone has ever built something like this with Ionic:
I’ve been investigating on how to achive something like the gif above.
I’ve seen Hammer js, but i have read that Ionic 5 it is going to have a gesture controller for animations an surely will replace Hammer js at least in Ionic. So I dont’t know if to implement Hammer js or what to do and if the gesture controller will allow me to achive that.
Anyone with an idea?
PD: Maybe it could be a good request for the team?
Thanks!
Posts: 1
Participants: 1
@develop-ai wrote:
Hello.
I’m using Ionic 4 with Angular 8
I want to “Disable” modal dismiss when i press android hardware “back” button.this.platform.backButton.subscribe(() => { console.log("Button Pressed"); });I can trace the event but i can’t prevent ionic to dismiss modal.
Posts: 1
Participants: 1
@sergiotapia-papa wrote:
Super simple question, I spun up a brand new Ionic 4 Capacitor/React app. I want to play a .mov file that’s located in my
/src/assets/splash_screen.movlocation.This doesn’t seem to work:
<video fullscreen="fullscreen" autoPlay={true}> <source src="../../assets/splash_screen.mov" type="video/mp4" /> </video>I see this in my network tab:
Also tried it without the leading
../../assetsand it still doesn’t play. Appreciate the help!
Posts: 1
Participants: 1
@MegA02 wrote:
Using in HTML:
<ion-button (click)=“speakMe()”>SPEAKUsing in .ts file:
speakOutput() {
var myinput = document.getElementById(“myinput”).innerHTML;
console.log(myinput);
this.tts.speak(myinput).then(() => console.log(‘Success’)).catch((reason: any) => console.log(reason));
}when I click the speak button a weird - definitely not what it should be saying - output is given, i’m not entirely sure how to reference the id of the input to be used. Any insight is greatly appreciated!
Posts: 1
Participants: 1
