@alex796 wrote:

Hi,

i have an ion-list inside an ion-content on a page which is used in a popover. Everything works fine on Android and in Safari when using ionic serve but on iOS (simulator and actual device) the content cannot be scrolled when the list is longer. If you try to scroll, it only “bounces” back.

I already tried everything I found in the forum and on the net, nothing helped.
iOS is Version 12.4.

Here’s the relevant code snippets:
page.html:

<ion-content padding no-bounce overflow-scroll="true" scroll="true">
    <p class="bold">{{'NOTIFICATIONS_AND_NEWS'|translate}}</p>
    <ion-list>
        <div *ngFor="let aNews of news">
            <ion-item *ngIf="aNews.deleted==false">
                    <ion-label text-wrap class="ion-margin-top" [style.font-weight]="aNews.read==true ? 'normal': 'bold'">{{aNews.title_de}}
                        <span style="position: absolute; right:0px;"><ion-icon name="close-circle" (click)="deleteClicked(aNews);"></ion-icon></span>
                    </ion-label>
                    <ion-note [style.font-weight]="aNews.read==true ? 'normal': 'bold'">{{aNews.text_de}}</ion-note>
                    <div class="gap"></div>
              </ion-item>
          </div>
    </ion-list>
</ion-content>

popover opened from tab1.page.ts;

async newsClicked(ev: any) {
    const popover = await this.popoverController.create({
      component: NewsPage,
      event: ev,
      translucent: false,
      cssClass: 'newspopover'
    });

    popover.onDidDismiss().then(() => { this.markNewsAsRead(); });

    return await popover.present();
  }

css class “newspopover” in global.scss:

.newspopover {
  --min-width: 80%;
  --max-width: 95%;
  overflow-y: scroll!important;
  -webkit-overflow-scrolling: touch;
}

Ionic info is:

Ionic:

   Ionic CLI                     : 5.2.7 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @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.1, (and 6 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.6.0)
   native-run  : 0.2.1 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/Users/alexander/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.10.3
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

Any help is greatly appreciated. Thanks!

Posts: 2

Participants: 2

Read full topic

@RomnEmpire wrote:

Hii team
I get the following error when launch the app in simulator only splash is showing continuos.

Tried solution:

After add below field in my info.plist file but not working for me.

FirebaseAppDelegateProxyEnabled: YES.
How to fix team any idea?

Screenshot_2019-08-30-18-57-33-37.png1080×2340 512 KB

Posts: 1

Participants: 1

Read full topic

@Mayamaya2015 wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@migeruj wrote:

Hello, I am quite new on Ionic but I have not had problems to connect Angular and to the Ionic Framework. I have an app that uses the SpeechReconition and TextToSpeech (tts) plugins, in development it works (as always happens). But doing build prod release to android the apk is useless. It only shows me only the graphic resources but does not ask for permissions or anything; Only with ionic serve and cordova run for test the app in my device it works fine. What can be? I’m using Ionic Studio.

Posts: 1

Participants: 1

Read full topic

@boussarhane wrote:

I’m trying to show a youtube video on my HTML page (activity-video.page.html)

<video>
    <source [src]="videoURL" />
</video>

My (activity-video.page.ts) looks like:

videoURL: string;
  constructor(navParams: NavParams, private modalController: ModalController) {
    this.videoURL = navParams.get("videoURL");
  }

BUT!! DevTools shows me this message:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://m.youtube.com/watch?v=fqI-feIYfhY with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Posts: 1

Participants: 1

Read full topic

@doug1e wrote:

I have a phaser project wrapped in ionic. The problem I have is about pointing the Phaser game canvas to a div in an ionic component. When I place the div into the index.html directly, everything works fine. However, when I point the canvas parent to a div in the component html, Phaser cannot link it and creates its own canvas.

I’d be grateful if you have any pointer.

Thanks,

Doug

Posts: 1

Participants: 1

Read full topic

@michelled wrote:

Please advise on how to change the color of a list. I cant change it from the value in the variables file --ion-background-color: #f2f2f2. I have tried everything.

My page background is #f2f2f2.

The image show the modal page with a red background. The list has to be white.

white-list-please.jpg818×1398 46.8 KB

Posts: 1

Participants: 1

Read full topic

@lqrz wrote:

Hi, I have a page which has a button with a [disabled] property, as:

<button ion-button block (click)="button_clicked()" [disabled]="disable_buttons">A button</button>

After pressing it, I disable the button and open an inAppBrowser, which once is closed, modifies the [disabled] attribute to make the button enabled back again:

    button_clicked(){

// disable the button
      this.disable_buttons = true;

      const options:InAppBrowserOptions = {
        location: 'no',
        hidden: 'no',
        clearcache: 'yes',
        clearsessioncache: 'yes',
        footer:'yes',
        zoom:'no'
      }

    const browser = this.inappbrowser.create(url, '_self', options);

    browser.on('exit').subscribe(
// enable the button
        (event:InAppBrowserEvent) => {this.disable_buttons = false;}
      );

    browser.show();
}

The problem is that, while the .on('exit') subscription executes successfully -that is, executes the line this.disable_buttons=false;, on the UX, the button remains as disabled.

Any hints?

Thanks

Posts: 1

Participants: 1

Read full topic

@ldoldan wrote:

Hello everyone! I am building a simple tabs navigation and I am trying to set the default tab.

I read in the docs that I should use the selectedTab attribute in the ionic-tab-bar, but it does not seem to work.

This is my routes tree:

  {
    path: "",
    component: LayoutComponent,
    children: [
      {
        path: "page1",
        children: PAGE1_ROUTES
      },
      {
        path: "page2",
        children: PAGE2_ROUTES
      },
      {
        path: "page3",
        children: PAGE3_ROUTES
      }
    ]
  }

And here is my Layout component:

<ion-router-outlet></ion-router-outlet>

<ion-tabs>
  <ion-tab-bar selectedTab="page2" class="bottom-navigation" slot="bottom">
    <ion-tab-button tab="page1">
      <ion-icon name="options" class="icon"></ion-icon>
      <ion-label class="label">Page 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="page2">
      <ion-icon src="/assets/icons/~" class="icon"></ion-icon>
      <ion-label class="label">Page 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="page3">
      <ion-icon src="/assets/icons/~" class="icon"></ion-icon>
      <ion-label class="label">Page 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

I want Page2 to be loaded when the app starts. Any idea how to achieve it?

Thank you!

Posts: 1

Participants: 1

Read full topic

@lunny wrote:

Hi guys, when I try my application on Android it doesn’t fully load the color of some components and they show gray.
Can you help me?

Posts: 1

Participants: 1

Read full topic

@Anarxy wrote:

Hi, I’m a beginner, and i try to do an app with a shopping cart.
So i write a litlle function to delete the items of the cart. But i need to switch page to see the change.

Why ?

Thanks !

(and sorry for bad english )

Posts: 1

Participants: 1

Read full topic

@crackTheCode wrote:

Hi all,

I’m am using Ionic v4 and Capacitor. I am attempting to use https://github.com/chariotsolutions/phonegap-nfc to read and write NDEF tags (https://www.amazon.com/dp/B075CFXY8V/ref=cm_sw_em_r_mt_dp_U_APeBDbM9T41J6)

I’ve installed the plugin as per instructions for using Cordova plugins with Capacitor, and the plugin itself seems fine. I have no problem getting information from tags. There is also seems to be a problem with Android Beam being on / off?

Upon trying to write to the tag when Android Beam is off, however, I get the following messages:

2019-09-01 18:51:50.563 4104-4244/io.ionic.starter V/Capacitor: callback: -1, pluginId: Console, methodName: log, methodData: {"level":"log","message":"NDEF_PUSH_DISABLED"}
2019-09-01 18:51:50.564 4104-4195/io.ionic.starter I/Capacitor/Plugin/Console: NDEF_PUSH_DISABLED

Upon trying to write to the tag when Android Beam is on, I get the following and nothing gets written:

2019-09-01 18:55:11.834 2987-7628/? D/SecContentProvider: query(), uri = 15 selection = isAndroidBeamAllowed
2019-09-01 18:55:11.835 2987-7628/? D/SecContentProvider: called from io.ionic.starter
2019-09-01 18:55:11.835 2987-7628/? D/RestrictionPolicy: isAndroidBeamAllowed : true
2019-09-01 18:55:11.837 4790-4790/io.ionic.starter E/NFC: isAndroidBeamAllowed - Begin
2019-09-01 18:55:11.837 4790-4790/io.ionic.starter I/NFC: showMsg is false

Here is the code I am using to write data:

writeNfc(data: any) {
    this.scanning = true;
    this.presentToast('Setting up...');
    this.nfc
      .addNdefListener(
        () => {
          this.presentToast('Successfully connected NDEF listener');
        },
        err => {
          this.presentToast(
            'There was an error connecting to an NDEF listener.  Make sure you have NFC turned on.'
          );
        }
      )
      .subscribe(event => {
        const message = this.ndef.textRecord('test');
        this.nfc
          .share([message])
          .then(success => {
            console.log(success);
            this.presentToast('Successfully written!');
            this.scanning = false;
          })
          .catch(error => {
            this.scanning = false;
            this.presentToast('Writing failed. Please try again.');
            console.log(error);
          });
      });
  }

and thus writing is unsuccessful. The permissions are granted, NFC is on, and everything seems fine in the config. Has anyone else ran into / solved this problem? Does have anything to do with Android Beam being on / off? Thanks!

Posts: 2

Participants: 1

Read full topic

@vancurengroup wrote:

Hi friends!

Has anyone had any success implementing geofencing in Ionic 4 or Capacitor on Android? I have tried the three plugins below using Ionic 4 with Cordova and Android and then trying Ionic 4 with Capacitor.

It appears the one open-source Cordova Geofencing plugin does not work because of an outdated implementation.

For Capacitor the two plugins listed I can’t seem to get to work. The first has no additional code aside from the boilerplate echo method. The second, FancyGeo, will not work after registering in my MainActivity.java and importing into my component.

The three plugins in question are:

Cordova

Capacitor
https://github.com/mvollebregt/capacitor-geofence-tracker (no android code)
https://github.com/triniwiz/capacitor-fancy-geo

Have a great weekend!

Posts: 1

Participants: 1

Read full topic

@geo3433 wrote:

From documentation

  async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK']
    });

    await alert.present();
  }

this function generates an alert message and it is called after clicking a button. Is there any other way to call the function, just like you call a regular function, for the alert message to be displayed? Like presentAlert();

Posts: 1

Participants: 1

Read full topic

@tux wrote:

Hello! Earlier have work with Angular with frontend project and know that components should be declared in the module.
But declaration in Ionic 4/Angular 4.8 doesn’t solve the problem:

Error: Component ImagesListComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component ImagesListComponent is not part of any NgModule or the module has not been imported into your module.

app.module.ts

@NgModule({
  declarations: [AppComponent, ImagesListComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

images-list.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ImagesListComponent } from './images-list/images-list-component.component';

@Component({
  selector: 'app-images-list',
  templateUrl: './images-list.component.html',
  styleUrls: ['./images-list.component.scss'],
})
export class ImagesListComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import {ImagesListComponent} from '../images-list/images-list.component';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'catalog',
        children: [
          {
            path: '',
            component: ImagesListComponent
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/catalog',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Please, give me an example based on tabs project.

Thanks!

Posts: 1

Participants: 1

Read full topic

@roy800227 wrote:

I want to migrate a project from ionic1 to ionic3, but cordova-plugin-ble-central has some problems

ionic1

   function quickScan( ) {
			var q = $ble.scan([], 3);
			q.then(function() {
				/* Done scanning */
				console.log("quickScan, numScans=" +sys.numScans);
				if (!sys.fsm.is("LISTING")) {
					setNumScans(0);
					return;
				}

				if (sys.numScans > 0)
					setNumScans(sys.numScans - 1);

				if (sys.numScans > 0) {
					quickScan();
				} else {
					console.log("BLE done scanning");
					if (sys.fsm.is("LISTING")) {
						sys.fsm.abort();
						sys.listOkCb(null);
					}
				}
			}, function(err) {
				/* Scanning Error */
				console.log("BLE ERR scanning");
				sys.fsm.abort();
				sys.listErrCb(err);
			}, function(dev) {
				/* New device found */
				addAndReportDevice(dev);
			});
		}

ionic3

  quickScan( ) {
			let q = this.Ble.scan([], 3)
			q.toPromise().then(function() {
				/* Done scanning */
				console.log("quickScan, numScans=" +this.numScans);
				if (!this.fsm.is("LISTING")) {
					this.setNumScans(0);
					return;
				}

				if (this.numScans > 0)
					this.setNumScans(this.numScans - 1);

				if (this.numScans > 0) {
					this.quickScan();
				} else {
					console.log("BLE done scanning");
					if (this.fsm.is("LISTING")) {
						this.fsm.abort();
						this.listOkCb(null);
					}
				}
			}, function(err) {
				/* Scanning Error */
				console.log("BLE ERR scanning");
				this.fsm.abort();
				this.listErrCb(err);
					/* New device found */
				this.addAndReportDevice(this.dev);
			});
		}

error message:TypeError: Cannot read property ‘scan’ of undefined

Please tell me how to solve it

Posts: 1

Participants: 1

Read full topic

@akshay1000 wrote:

I have been learning about Ionic by implementing a side-menu in my demo application. I have pretty much followed all the steps, but fail to render the side-menu as the toggle menu buttons seem to be missing. Below is the required code required for analysis if required.

Source Code for Menu Items :
menu.module.ts :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { MenuPage } from './menu.page';

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      {
        path: 'first',
        loadChildren: '../first/first.module#FirstPageModule'
      },
      {
        path: 'second',
        loadChildren: '../second/second.module#SecondPageModule'
      }
     
    ]
  },
  {
    path: '',
    redirectTo: '/menu/first'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MenuPage]
})
export class MenuPageModule { }

Source code for menu.page.ts :

import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.page.html',
  styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {

  pages :[
    {
      title:'First',
      url:'/menu/first'
    },
    {
      title:'Second',
      url:'/menu/second'
    }
   
  ];

  selectedPath = '';

  constructor(private router : Router ) {
    this.router.events.subscribe((event : RouterEvent) => {
      this.selectedPath = event.url;
    })
   }

  ngOnInit() {
  }

}

Source Code for app-routing.module.ts :

import { NgModule } from '@angular/core';
import {RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', 
    loadChildren: './pages/menu/menu.module#MenuPageModule' 
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Source code for menu.page.html :

<ion-split-pane>
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle autoHide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
            <ion-label>
              {{ p.title }}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

I get the output as a blank menu when ionic serve is used. Please help me with this blocker as soon as possible. Let me know in case any additional code or info is needed

Posts: 1

Participants: 1

Read full topic

@lucaceck95 wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@Amolinari wrote:

evety time a start an ionic command from shell in macosx (catalina), eg.
ionic serve

when I try to stop it, cpu load increases a lot, cpu fans spins too
I searched on processes, I found that there’s a very high number of processes with “pgrep” command, it seems threre’s an infinite loop that’s (I suppose) searching for a sort of process PID of ionic!?

the only “workround” I’ve found is to kill ionic process, considering that’s the parent process, all the pgrep’s ones are dropped

anyone else w/ this strange issue?
suggestions?

thank you
Antonio

Posts: 1

Participants: 1

Read full topic

@ioclaudio wrote:

Hi,
I have to update the system payment of an Ionic4 app using 3DS.
Do you know if there is a library or a plugin to do this?

Reading the protocol specifications it seems that there is a phase of the authorization procedure that happens outside the app on the card issuer site.
Here the user provides some credentials and the card emitter site redirects to the merchant site with the result of the transaction,

How this can be implemented?
Should I use the InAppBrowser plugin to redirect the user to the emitter site?
And how can I manage, with my App, the redirection to the merchant site done by the emitter site?

It seems simple to implement this behavior with a web site but not with a mobile App.

Thank you very much.

cld

Posts: 1

Participants: 1

Read full topic