When I click an item (with routerLink set) in the side menu the page is pushed into the history even if that page is already being shown. How can I prevent that?

1 post - 1 participant

Read full topic

I use the below side menu structure to navigate to a view in the app. The route opens yet the menu does not close as desired.
Why? Is Ionic3 menuClose still available? I’m not finding it on the ionic5 menu documentation. What would the alternative in ionic5 be?

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list no-lines width="10">
          <ion-list-header>
            <h2>HELLO</h2>
          </ion-list-header>  
          <ion-item menuClose [routerLink]="['/view1']">
            View1
          </ion-item>
...

2 posts - 2 participants

Read full topic

I’ve integrated firebase cloud messaging, and got it all working, but i’m getting a popup every time a user logs in or out. I can’t find anything about this on google, but i’m assuming i’ve done something wrong!

is there a way to stop this?

IMG_1585.PNG1125×2436 452 KB

1 post - 1 participant

Read full topic

Hi everybody. I searched for every solution I could find for this but I could not make my modal window semi transparent. It seems Ionic / Angular (I am not sure which one) is generating an extra div (with id=“background-content”) that is making my background solid and I cannot change that with ANY styling.

image1918×1052 245 KB

Without it I can see the content from the background:

image1842×1004 294 KB

I tried adding global styles, local styles (directly referencing #background-content) but they are not applied.
The idea is to create a semi transparent unlock slider modal.

I tried this solution: Ionic-v4 how to make transparent modal
And this one: https://github.com/ionic-team/ionic/issues/18589
And this one: https://stackoverflow.com/questions/57181464/ionic-4-how-to-change-modal-background-to-transparent

None of them worked. Any ideas what I might be missing?

Here is the content of modal html:

<ion-content class="ion-no-padding ion-no-margin">
  <unlocker (unlocked)="unlockedHandler($event)"></unlocker>
</ion-content>

Here is how I call the modal:

this.modal = await this.modalController.create({
          component: UnlockerPage,
          cssClass: 'unlocker-content',
          showBackdrop: false,
          swipeToClose: true
        });

Here is my global scss style:

.unlocker-content {
  width: 100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.3) !important;
  --background: transparent !important;

  .modal-wrapper {
    background-color:rgba(0, 0, 0, 0.3) !important;
    --background: transparent !important;
  }
}

Any help and tips would be appreciated.

2 posts - 2 participants

Read full topic

{
  "dependencies": {
    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@capacitor/android": "^2.2.1",
    "@capacitor/core": "^2.2.1",
    "@capacitor/ios": "^2.2.1",
    "@ionic-native/core": "^5.27.0",
    "@ionic-native/splash-screen": "^5.27.0",
    "@ionic-native/status-bar": "^5.27.0",
    "@ionic/angular": "^5.2.3",
  },
  "devDependencies": {
    "@angular-devkit/architect": ">= 0.900 < 0.1100",
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler": "~9.1.6",
    "@angular/compiler-cli": "~9.1.6",
    "@angular/language-service": "~9.1.6",
    "@capacitor/cli": "^2.2.1",
    "@ionic/angular-toolkit": "^2.2.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "open": "^7.0.3",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  },
}

This is a new project and I did some changes, added a few pages and components.

Also, my Android and iOS projects have different project id’s that I wrote manually using their natives IDE’s. For example: Android is com.test.app and iOS is com.test.app2

Steps I did after my changes:

1. npx cap init
2. npx cap add android
3. npx cap add ios
4. ionic capacitor sync (to build all and try my app using an emulator)

I have 20 minutes watching in console:

my-awesome-app@0.0.1 ionic:build /Users/test-user/Documents/my-awesome-app
ionic build “–project=app”
npm run ionic:build – --project=app
my-awesome-app@0.0.1 ionic:

Those lines repeats over and over again.

What I did wrong?

1 post - 1 participant

Read full topic

I have implemented alternate row colors in a list (greenbar effect), using a simple css background-color for the alternate rows, but they look terrible in ios “Dark Mode”

Is there a technique to get this effect that is compatible with ios Dark Mode?

OK: I’ve found this…

…will experiment.

1 post - 1 participant

Read full topic

There is an issue with the Your-First-App (Gallery app) here

When you rebuild the app through xcode 11.5, it causes all previously taken images to show up blank (but their image borders are still visible). See images attached.

Issue tested on 2 modern iphones and ipad pro 3.
It works fine on android.

106923369_889040894929545_4436365209869346935_n1242×2208 65.2 KB

106986092_725539328208525_3077003467489217628_n1242×2208 637 KB

1 post - 1 participant

Read full topic

**1) HTML Response from API**

[{
"Default_HTML_Overlay":  "<div class="tab-pane active" style="width: 348px; height: 204px; margin: 0 auto; background-image: url('www.domain.com/BG/DC/White-Others-V1.jpg'); background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border: none; position: relative; overflow: hidden; -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);" id="front"> <div class="setLimit" style="width: 312px; height: 168px; margin: 18px; background-color: none; position: absolute; z-index: 51; overflow: visible;" id="safeZone"> <div id="customizePanelFront" style="position: absolute; width: 100%; height: 100%; display: block;"> <div id="imgPhoto" class="ppimage" style="position: absolute; top: 0px; left: 2px; width: 101px; height: 151px; z-index: 100;"> <img id="imagePhoto" src="www.domain.com/Photo/DC/photo_not_uploaded_grey.jpg" style="width: 100%; height: 100%;"/> </div><div id="imgLogo" style="position: absolute; top: 32px; left: 114px; width: 196px; height: 42px; text-align:right; z-index: 95;"> <img id="imageLogo" src="www.domain.com/Logo/General/DC/kw-full-color.png" style="max-width: 100%; max-height: 100%;"/></div><div id="imgDes1" style="position: absolute; top: 156px; left: 292px; width: 18px; height: 12px; z-index: 94;"> <img id="imageDes1" src="www.domain.com/Designation/General/DC/default-des1.png" style="width: 100%; height: 100%;"/></div><div id="imgDes2" style="position: absolute; top: 156px; left: 271px; width: 18px; height: 12px; z-index: 93;"> <img id="imageDes2" src="www.domain.com/Designation/General/DC/default-des2.png" style="width: 100%; height: 100%;"/></div><div id="imgDes3" style="position: absolute; top: 156px; left: 250px; width: 18px; height: 12px; z-index: 93;"> <img id="imageDes3" src="www.domain.com/Designation/General/DC/default-des3.png" style="width: 100%; height: 100%;"/> </div><div id="lblName" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 13pt; color: #000; text-transform: none; overflow: hidden; z-index: 90; width: 196px; height: 19px; line-height: 19px; top: -1px; left: 114px;"> <label id="lbltextName">Your Full Name</label> </div><div id="lblTitle" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 89; width: 196px; height: 14px; line-height: 14px; top: 17px; left: 114px;"> <label id="lbltextTitle">Job Title</label> </div><div id="lblPhone" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 87; width: 196px; height: 14px; line-height: 14px; top: 78px; left: 114px;"> <label id="lbltextPhone">First Phone / Other</label> </div><div id="lblOfficePhone" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 86; width: 196px; height: 14px; line-height: 14px; top: 91px; left: 114px;"> <label id="lbltextOfficePhone">Second Phone / Other</label> </div><div id="lblMailID" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 88; width: 196px; height: 14px; line-height: 14px; top: 105px; left: 114px;"> <label id="lbltextMailID">Email / Other</label> </div><div id="lblWebsite" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 8pt; color: #000; text-transform: none; overflow: hidden; z-index: 83; width: 196px; height: 14px; line-height: 14px; top: 118px; left: 114px;"> <label id="lbltextWebsite">Website / Other</label> </div><div id="lblAddress1" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 7pt; color: #000; text-transform: none; overflow: hidden; z-index: 82; width: 196px; height: 13px; line-height: 13px; top: 132px; left: 114px;"> <label id="lbltextAddress1">Street Address</label> </div><div id="lblAddress2" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 7pt; color: #000; text-transform: none; overflow: hidden; z-index: 81; width: 196px; height: 13px; line-height: 13px; top: 143px; left: 114px;"> <label id="lbltextAddress2">City State Zip</label> </div><div id="lblDisclaimer" style="position: absolute; background-color: none; text-align: left; font-family: Helvetica_Neue_67_Md_Cn; font-size: 5pt; color: #000; text-transform: none; overflow: hidden; z-index: 81; width: 220px; height: 11px; line-height: 11px; top: 158px; left: 2px;"> <label id="lbltextDisclaimer">Each Office is Independently Owned and Operated</label> </div></div></div><div class="one" id="cutFrontTop" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-x; width: 100%; height: 1px; position: absolute; top: 6px; left: 0px;"></div><div class="two" id="cutFrontBottom" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-x; width: 100%; height: 1px; position: absolute; top: 197px; left: 0px;"></div><div class="three" id="cutFrontLeft" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-y; width: 1px; height: 100%; position: absolute; top: 0px; left: 6px;"></div><div class="four" id="cutFrontRight" style="background: url(www.domain.com/Common/DC/dot-line.jpg) repeat-y; width: 1px; height: 100%; position: absolute; top: 0px; left: 341px;"></div></div>"
}]

**2) HTML Render**

<ion-item *ngFor="let card of result" (click)="cardTapped(card)">
    <ion-label [innerHTML]="getHtmlWithBypassedSecurity(card.Default_HTML_Overlay)">
    </ion-label>
  </ion-item>
</ion-content>

**3) DOM DomSanitizer**

public getHtmlWithBypassedSecurity(code: string): SafeHtml {
    return this.dom.bypassSecurityTrustHtml(code);
  }

: HTML error LIKE

GET http://localhost:4200/www.domain.com/Photo/DC/photo_not_uploaded_grey.jpg 404 (Not Found)

how to solve this issue anyone can help,

Thanks in advance.

1 post - 1 participant

Read full topic

.item-datetime | ion-datetime

This does not work (nor with important)

.item-datetime {
    --ion-item-background-activated: transparent;
    --ion-item-background: transparent;
    --ion-item-background-focused: transparent;
    --ion-item-background-hover: transparent;

    --ion-item-background-activated: transparent;
    --background: transparent;
    --background-activated: transparent;
    --background-focused: transparent;
    --background-hover: transparent;
    background: transparent;

    --background-activated-opacity: 0;
    --background-focused-opacity: 0;
    --background-hover-opacity: 0;
    --transition: none;
}

1 post - 1 participant

Read full topic

RouterDirection: Forward page is not staying in navigation stack. Lets imagine the scenario I am on page A which is root page. From page A I went to page B and from page B I went to page C. Now if I am clicking on ion-back-button from page C it should navigate back to page B whereas it’s navigating properly i.e: it’s changing url properly which is of page B but showing the content of root page A.

I even tried location.back() and defaultHref but it’s not working.

Video link to understand the problem easily is: https://gofile.io/d/uQZu8N

This is a very basic feature which Ionic can’t miss out. So it might be somewhere I am doing something wrong. My current version is Ionic 5. Any help would be deeply appreciated.

1 post - 1 participant

Read full topic

How can I show a certain component when the app starts on a Stencil JS app?

I tried doing this (it has worked in the past) on the app-root component:

  <ion-app>
    <ion-router useHash={false}>
      <ion-route component="app-tabs">
        <ion-route url="/" component="tab-home" />
      </ion-route>
    </ion-router>
    <ion-nav />
  </ion-app>

Then this on the app-tabs component:

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab-home">
        <ion-icon name="home-outline"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="tab-transactions">
        <ion-icon name="reader-outline"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="tab-categories">
        <ion-icon name="folder-outline"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="tab-accounts">
        <ion-icon name="person-outline"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>

    <ion-tab tab="tab-home" component="app-home" />

    <ion-tab tab="tab-transactions" component="app-transactions" />

    <ion-tab tab="tab-categories" component="app-categories" />

    <ion-tab tab="tab-accounts" component="app-accounts" />

  </ion-tabs>

With no luck. I don’t know what I am doing wrong, please help.

If I clicked on any of the icons in the tab bar after the app starts it shows the page I am expecting, but I want to show tab-home at boot.

First screenshot is after boot and the second screenshot is after I click the Home Icon on the tab bar.

"devDependencies": {
    "@ionic/core": "^5.2.3",
    "@stencil/core": "^1.15.0",
    "@types/jest": "^26.0.3",
    "jest": "^26.1.0"
  },

I also tried following the example on the StencilJS resources:
https://stenciljs.com/resources the visited:
https://www.joshmorony.com/basic-and-advanced-tab-navigation-with-ionic-and-stencil-js/
https://dev.to/cm/stencil-routing-with-ion-router-ion-tabs-and-how-to-pass-params-to-tab-pages-without-using-angular-4lfl

Screenshot_2020-07-04 PWA Toolkit696×463 1.42 KB

Screenshot2 PWA Toolkit650×922 41.4 KB

2 posts - 1 participant

Read full topic

image743×474 36.1 KB

image1920×1080 133 KB

I am having two values but it’s getting checked for only one value. Can anyone help?

1 post - 1 participant

Read full topic

I’m using @ionic-native/ble/ngx but it won’t connect to my peripheral. I’ve double-checked the service UUID, can view it in LightBlue. When I was testing earlier, I had placed the device’s MAC in connect() and that worked. But not this. According to the docs, startScan([this.serviceUUID]) should work.

Note that I did not add anything to app.module.ts or setup.module.ts. It worked fine when using the MAC, as mentioned earlier.

Also, I’m still kinda a newbie at this.

Please assist.

setup.page.ts:

import { Component, OnInit } from '@angular/core';
import { BLE } from '@ionic-native/ble/ngx';

@Component({
  selector: 'app-setup',
  templateUrl: './setup.page.html',
  styleUrls: ['./setup.page.scss'],
})
export class SetupPage implements OnInit {
  private serviceUUID = '2fe11a47-e4b8-4522-9cff-aa729b8215c0';
  public bluetooth_enabled: boolean;
  public bluetooth_connected: boolean;

  constructor(private ble: BLE) { }

  ngOnInit() {
    this.bluetooth_enabled = false;
    this.bluetooth_connected = false;
    console.log('[DEBUG] this.bluetooth_enabled', this.bluetooth_enabled);
    console.log('[DEBUG] this.bluetooth_connected', this.bluetooth_connected);
    this.ble.enable().then(() => {
      this.ble.isEnabled().then(() => {
        this.bluetooth_enabled = true;
        console.log('[DEBUG] this.bluetooth_enabled', this.bluetooth_enabled);
        this.ble.startScan([this.serviceUUID]).subscribe(device => {
          console.log('[DEBUG] device.id', device.id);
          this.ble.autoConnect(device.id, () => {
            this.ble.stopScan();
            this.bluetooth_connected = true;
            console.log('[DEBUG] this.bluetooth_connected', this.bluetooth_connected);
          },
            // Disconnect callback
            () => { });
        });
      });
    });
  }
}

setup.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Setup
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="bluetooth_enabled">Bluetooth enabled</div><br />
  <div *ngIf="bluetooth_connected">Bluetooth connected</div>
</ion-content>

Console:

2020-07-05 01:29:22.991 32548-32548/com.ionicthemes.ionic5fullapp I/Capacitor/Console: File: http://localhost/setup-setup-module-ngfactory-es2015.js - Line 239 - Msg: [DEBUG] this.bluetooth_enabled false
2020-07-05 01:29:22.992 32548-32548/com.ionicthemes.ionic5fullapp I/Capacitor/Console: File: http://localhost/setup-setup-module-ngfactory-es2015.js - Line 240 - Msg: [DEBUG] this.bluetooth_connected false
2020-07-05 01:29:23.202 32548-32548/com.ionicthemes.ionic5fullapp I/Capacitor/Console: File: http://localhost/setup-setup-module-ngfactory-es2015.js - Line 244 - Msg: [DEBUG] this.bluetooth_enabled true

Output on the phone:

Bluetooth enabled

3 posts - 1 participant

Read full topic

Hi,

Natively it is possible to swipe anywhere on the screen and trigger the swipe back or forward transition. Also with the ability to drag essentially and if it’s dragged past 50% then go to the page.

And example of this illustrated here:

316×566 137 KB

Is this in any way possible with Ionic/corodova/capacitor?

1 post - 1 participant

Read full topic

I want to embed a third party webpage into my mobile app. I thought of using iframe for that purpose. Will my app be not allowed in ios app store or google play store if I use iframe?. Please advise

1 post - 1 participant

Read full topic

Anyone has an example how to use SIP with Ionic V5?

1 post - 1 participant

Read full topic

Apple Pay integration with IONIC 3. Error completeTransactionWithMerchant function of undefined
I am trying to use the plugin to integrate Apple Pay in my IONIC v3 app from https://ionicframework.com/docs/native/apple-pay/.

It is really saddening to say that this was already asked more than a couple of times [ref below] but hasn’t been addressed yet. I request the “Elite” IONIC team to look at such matters on priority. Spending so long for such petty things makes me give a second thought on the performance and team of IONIC.

Ref:

1. Ionic 2 apple pay error
2. https://stackoverflow.com/questions/61516440/apply-pay-ionic-v4
3. Apple pay not working in iPhone 6s Simulator for ionic 4

1 post - 1 participant

Read full topic

has anyone try to integrate ihealth products with ionic cordova?

1 post - 1 participant

Read full topic

Hi,

I have an app that has a PHP backend and retrieves data from APIS. Before the app is getting the data via HTTP Rest APIs and now the server has enabled SSL certificate. So I had to change my URLs to https.

but now I’m getting the following error.

image723×169 17.4 KB

1 post - 1 participant

Read full topic

Hello,

I am about to change my API DNS in the coming days and I am a little bit concerned by the DNS propagation. During that time, my app, that relies on API calls, won’t be working at all since the web server will be shut down. I’m OK with that.
With Ionic/Cordova, is there anything special I should be aware of ? Beside a low TTL, are there any other best practices ?

Thx

1 post - 1 participant

Read full topic