@honzapoboril wrote:

Is it possible in ion-content to have some elements with and without padding? In my tests class="ion-padding-horizontal" or class="ion-padding" woks only on <ion-content> and <ion-slides>, not on <ion-text>.

<ion-content>
    <ion-slides>
      ...
    </ion-slides>

    <ion-text
      ...
      class="ion-padding-horizontal"
    />

This will render as:

Snímek obrazovky 2020-03-25 v 20.51.35418×553 114 KB

<ion-content class="ion-padding-horizontal">
    <ion-slides>
      ...
    </ion-slides>

    <ion-text
      ...
    />

This will render as:

Snímek obrazovky 2020-03-25 v 20.51.07418×565 227 KB

<ion-content>
    <ion-slides class="ion-padding-horizontal">
      ...
    </ion-slides>

    <ion-text
      ...
    />

This will render as:

Snímek obrazovky 2020-03-25 v 21.18.15420×532 107 KB

CSS is included like this:

import '@ionic/core/css/core.css'
import '@ionic/core/css/ionic.bundle.css'

Versions:
@ionic/core: 5.0.5
@ionic/vue: 0.0.9
vue: 2.6.11

Project is available here: https://jeruzalem.poboril.cz/#/page/339249

Thank you for help

Posts: 1

Participants: 1

Read full topic

@Thugmaster wrote:

As I know lazy loading modules reduce first loading time but if we talk about mobile apps where all output js bundles located together. Seems there is no difference in performance.

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to add a “live” marker to my ionic app using Google Maps & Geolocation.

With the below code, I’m able to add markers to my app when my location changes.

But instead of add a new marker, I want to “update” the original marker, & make it look like the marker is moving around (like it does on Google maps if you move around with your phone).

How can this be done?

Here is the code I currently have:

ionViewWillEnter() {
    this.anonLogin();
    this.loadMap();
  }

  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(res => {
      this.user = res.user;

      this.watch = Geolocation.watchPosition({}, (position, err) => {
        if (position) {
          let marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            animation: google.maps.Animation.DROP,
            map: this.map
          });
        }
      });
    });
  }

  loadMap() {
    Geolocation.getCurrentPosition().then((resp) => {
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
    }).then(() => {
      let mapOptions = {
        center: this.latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var marker = new google.maps.Marker({
        position: this.latLng,
        title: "Hello World!"
      });
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      marker.setMap(this.map);
    }).catch((err) => {
      console.log(err);
    });
  }

Here is what is currently being outputted:

Screenshot_20200325-213929_google-maps1080×2220 199 KB

But instead of multiple markers like above, I just want to update one marker that shows my live location, & make it appear as if the marker is moving with me.

Thanks a lot!

Posts: 1

Participants: 1

Read full topic

@tim-tx wrote:

There seems to be a standard page transition animation where content slides upward as it becomes visible. I have a navbar component that sits in the header of all my core pages, like:

<ion-header>
  <app-navbar></app-navbar>
</ion-header>

The navbar participates in the transition animation, it slides up as with the rest of the content. My feeling is that it should remain fixed.

I can think of two possible solutions:

1. Place the navbar somewhere where it exists outside of the transition (app.component.html?), or
2. Something else (configuration I’m unaware of, or wrapping the navbar in some special element that exempts it from transitions)

I have tried placing the navbar at various positions in app.component.html, e.g.

<ion-header>
  <app-navbar></app-navbar>
</ion-header>
<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

In that case the navbar remains visible and does not transition, but content is hidden underneath it.

Wrapping the app-navbar in an ion-toolbar does not prevent the navbar from appearing in the transition or from covering page content (if the navbar is in app.component.html.

How can I prevent content in the header from participating in the page transition animation?

Posts: 1

Participants: 1

Read full topic

@larryknoxweb wrote:

if you have been building ionic 5 apps how do you use and ionic serve an older Ionic 3 app?
And maybe npm install for older git clone projects?

Posts: 1

Participants: 1

Read full topic

@zwin wrote:

<ion-nav #mycontent [root]=“rootPage” >
tabs.ts
tab1Root = HomePage;
tab2Root = ContactPage;
tab3Root = AboutPage;
tab4Root = AlarmsPage;

tabs.html

<ion-tab [root]="tab1Root"   tabIcon="desktop" ></ion-tab>
<ion-tab [root]="tab2Root"   tabIcon="warning"></ion-tab>
<ion-tab [root]="tab3Root"   tabIcon="stats" ></ion-tab>
<ion-tab [root]="tab4Root"   tabIcon="megaphone"></ion-tab>

</ion-tabs>

before

after

Posts: 2

Participants: 2

Read full topic

@trollanfer wrote:

I want to display a pdf with ng2-pdfjs-viewer`.
When I hard code in my homepage.html something like :

<ng2-pdfjs-viewert pdfSrc="myfile.pdf"><ng2-pdfjs-viewert>

It’s ok, but when the same string comes from a json, it’s not evaluated and nothing shows up.

But if I do the same with an <img> tag, it’s ok and it is evaluated to an image.

It seems to me that the browser knows what to do with img and does it, but is not told what to do by angular/ionic with ng2-pdfjs tag.

What can I do ? I think about ComponentFactoryResolver, but not clear to me.

Posts: 2

Participants: 2

Read full topic

@Nats97 wrote:

I’ve a wooCommerce store and am making an application for the same with ionic 5. When I load the products page, API call is made to Wordpress REST API and images are loaded slowly slowly, while I’ve check the other competitor apps, their images are loaded instantly. Here is my API call to service

 this.productService.getProducts().subscribe(list => {
      console.log('List: ', list);
      this.productList = list;
    });

and here is how am I rendering the images

  <ion-grid class='ion-text-center' *ngIf='productList'>
        <ion-row>
            <ion-col *ngFor='let product of productList.slice(0,3)'>
                <!-- <ion-item> -->
                <ion-avatar>
                    <ion-img [src]='product.images[0].src'></ion-img>
                </ion-avatar>
                <ion-text>{{product.name}}</ion-text>
                <!-- <ion-label>{{product.name}}</ion-label> -->
                <ion-button size='small' color='secondary'>Add to Cart</ion-button>
                <!-- </ion-item> -->
            </ion-col>
        </ion-row>
    </ion-grid>

It takes almost 2, 3 seconds to show images which unfortunately is very irritating user experience. While the other apps that I’ve check take less than 1 second. What should I do. any help will be highly appreciated.

Posts: 2

Participants: 2

Read full topic

@sshipsey wrote:

How do you set scroll position for the ion-content generated by <ion-tabs>? i.e.

<ion-tabs>
  <div class="tabs-inner"> <---- generated from ion-tabs component template
    <ion-router-outlet>
      <ion-content> <--- trying to set scroll position for this container
      </ion-content>
    </ion-router-outlet>
  </div>
</ion-tabs>

Thanks

Posts: 1

Participants: 1

Read full topic

@maxionionic wrote:

I’ve just installed ionic and at the very first try to run “ionic serve” on an empty project I get this error:

TypeScript error in /node_modules/@types/testing-library__react/node_modules/pretty-format/build/index.d.ts(7,13): [react-scripts] ‘=’ expected. TS1005

I think is related to some version problem (any node specific version is needed?)… but some help will be welcome!

I have node v10.16.3

Posts: 2

Participants: 2

Read full topic

@enderson07 wrote:

I am studying ionic, but it has more content in version 3. how to use version 3 currently available in v5?

ps:sorry for the typos

Posts: 1

Participants: 1

Read full topic

@tasteink wrote:

Is there a set of design assets for the Ionic design system? Anything like a Sketch or Figma document, maybe?

Posts: 1

Participants: 1

Read full topic

@abizit wrote:

I am developing a new app on Ionic 5 which i intend to make it to a hybrid app. And i’m fairly new to Ionic but have been working in Angular for quite some time.

So the problem i am having is when i login and it goes to a dashboard then logout and when i click on the browser back button it still loads the dashboard. I checked in dev tool and apparently it still hold the previous component in the DOM. Unlike in angular which destroys the Previous DOM. I consoled the route Guard and it seems that it does not hit the route guard when i do the browser back button
So this i causing a weird problem.

I hope i am clear about my problem.

Thanks in advance

Posts: 1

Participants: 1

Read full topic

@lily28 wrote:

I tried to do a login & register page. After click on the register button, timeout alert error shown but there are no log errors. Although the timeout alert is shown,the data I used to register is successfully saved in MYSQL database


database:

image691×48 5.96 KB

register.page.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ToastController, LoadingController, AlertController } from '@ionic/angular';
import { AccessProviders } from '../providers/access-providers';

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

  u_name          : string = "";
  u_email_address : string = "";
  u_password      : string = "";
  u_confirm_password : string = "";

  disabledButton;

  constructor(
    private router : Router,
    private toastCtrl : ToastController,
    private loadingCtrl : LoadingController,
    private alertCtrl : AlertController,
    private accsPrvds: AccessProviders
  ) { }

  ngOnInit() {
  }

  ionViewDidEnter(){
    this.disabledButton = false;
  }

  async tryRegister(){
    if(this.u_name == ""){
      this.presentToast('Name is required');
    }else if(this.u_email_address == ""){
      this.presentToast('Email is required');
    }else if(this.u_password == ""){
      this.presentToast('Password is required');
    }else if(this.u_confirm_password != this.u_password){
      this.presentToast('Password are not the same');
    }else{
      this.disabledButton = true;
      const loader = await this.loadingCtrl.create({
        message: 'Please wait a moment...',
      });
      loader.present();

      return new Promise(resolve =>{
        let body = {
          aksi: 'proses_register',
          u_name: this.u_name,
          u_email_address: this.u_email_address,
          u_password: this.u_password
        }

        this.accsPrvds.postData(body, 'proses_api.php').subscribe((res:any)=>{
          if(res.success==true){
            loader.dismiss();
            this.disabledButton = false;
            this.presentToast(res.msg);
            this.router.navigate(['/login']);
          }else{
            loader.dismiss();
            this.disabledButton = false;
            this.presentToast(res.msg);
          }
        },(err)=>{
          loader.dismiss();
          this.disabledButton = false;
          this.presentAlert('Timeout');
        });
      });
    }
  }

  async presentToast(a){
    const toast = await this.toastCtrl.create({
      message : a,
      duration: 1500,
      position: 'top'
    });
    toast.present();
  }

  async presentAlert(a){
    const alert = await this.alertCtrl.create({
      header: a,
      backdropDismiss: false,
      buttons: [
      {
        text: 'Close',
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
          //action
        }
      }, {
          text: 'Try Again',
          handler: () => {
            this.tryRegister();
          }
        }
      ]
    });
    await alert.present();
  }
}```

I can't really find errors in this code, anyone knows how solve this or find anything I have missed. Let me know if you need to see others code

Posts: 1

Participants: 1

Read full topic

@AKrayhan wrote:

ionic provlem839×187 7.21 KB

Posts: 1

Participants: 1

Read full topic

@MeerDev wrote:

I have a signup page and it has multiple fields and when I fill the ion-input field it’s not focusing on the next field but it’s working on the pre-generated page (homePage) and if I create a new page then it’s not working, please see the images attached.

1.code Image

Screenshot 2020-03-26 at 12.22.50 PM2880×1800 859 KB

2.app screenshots

Screenshot 2020-03-26 at 12.21.50 PM748×1550 133 KB

Screenshot 2020-03-26 at 12.22.12 PM774×1506 153 KB

Posts: 1

Participants: 1

Read full topic

@larsrayvn wrote:

Hi all,
I’m working on trying to get rid of the warning " Apple will stop accepting submissions of app updates that use UIWebView APIs starting from December 2020" from Apple when i upload new apps to the app store.

I have upgraded to cordova-ios 5.1.1 and updated all plugins which i find in my package.json. I also have added to my config.xml file as suggested here: https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/

My installed WKWebView plugin is this one cordova-plugin-ionic-webview, and i see when i run the app from xcode that it says I’m using WKWebView. Still i get the warning from Apple.

I have a feeling that there may be some of the plugins I’m using that are referencing UIWebView, but i am not able to figure out which one(s). I’ve been spending two days on this issue, and now would like some help, if possible. Providing my list of plugins below, hoping that anyone can tell me if any of these are referencing UIWebView, or have dependencies that does. I don’t have the competency to figure this out myself.

Btw, moving to Capacitor is not an option for me at this point.

Here’s the plugin list i get from running command cordova plugins list:

cordova-android-firebase-gradle-release 4.0.0 “cordova-android-firebase-gradle-release”
cordova-android-play-services-gradle-release 4.0.0 “cordova-android-play-services-gradle-release”
cordova-android-support-gradle-release 3.0.1 “cordova-android-support-gradle-release”
cordova-plugin-androidx 1.0.2 “cordova-plugin-androidx”
cordova-plugin-androidx-adapter 1.1.0 “cordova-plugin-androidx-adapter”
cordova-plugin-app-version 0.1.9 “AppVersion”
cordova-plugin-background-geolocation 3.1.0 “CDVBackgroundGeolocation”
cordova-plugin-badge 0.8.8 “Badge”
cordova-plugin-camera 4.1.0 “Camera”
cordova-plugin-console 1.1.0 “Console”
cordova-plugin-customurlscheme 5.0.1 “Custom URL scheme”
cordova-plugin-device 2.0.3 “Device”
cordova-plugin-file 6.0.2 “File”
cordova-plugin-file-opener2 3.0.0 “File Opener2”
cordova-plugin-file-transfer 1.7.1 “File Transfer”
cordova-plugin-geolocation 4.0.2 “Geolocation”
cordova-plugin-ionic 5.4.6 “cordova-plugin-ionic”
cordova-plugin-ionic-keyboard 2.2.0 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.1.3 “cordova-plugin-ionic-webview”
cordova-plugin-local-notification 0.9.0-beta.2 “LocalNotification”
cordova-plugin-network-information 2.0.2 “Network Information”
cordova-plugin-safariviewcontroller 1.6.0 “SafariViewController”
cordova-plugin-telerik-imagepicker 2.3.3 “ImagePicker”
cordova-plugin-vibration 3.1.1 “Vibration”
cordova-plugin-whitelist 1.3.4 “Whitelist”
cordova-support-google-services 1.4.0 “cordova-support-google-services”
cordova.plugins.diagnostic 5.0.1 “Diagnostic”
newrelic-cordova-plugin 5.0.0 “NewRelic”
phonegap-plugin-multidex 1.0.0 “Multidex”
phonegap-plugin-push 2.3.0 “PushPlugin”

Thank you in advance,
Lars

Posts: 2

Participants: 2

Read full topic

@toddmobilecaddy wrote:

I’m trying get a remote hybrid cordova app to work with service workers.
My service worker (and bulk of ionic app) is being loaded from a server on the web, and it seems to work OK (caching of the js/css/html etc), apart from when I try to access the cordova.js which is being served from localhost.

I’ve read lots on this and have tried many things, but whenever I run up the app a second time the call to load https://localhost/cordova.js fails with TypeError: Failed to fetch.

Has anyone managed to get a sw working with this type of setup?
Ta, Todd

Posts: 1

Participants: 1

Read full topic

@iliraga wrote:

Hi,

Our iOS builds are failing on App Flow. Locally they succeed with Xcode 11. We are using Ionic 3 with a bunch of plugins

When the build uses Xcode 10, then there is an error. So I tried building with Xcode 11, there the build process is stuck at “Initializing…”

Xcode 10 Error:

[07:37:43]: ▸ 1 error generated.
[07:37:43]: ▸ /Users/ionic/builds/…/platforms/ios/…/Plugins/cordova-plugin-background-fetch/CDVBackgroundFetch.m:9:9: fatal error: could not build module ‘TSBackgroundFetch’
[07:37:43]: ▸ #import <TSBackgroundFetch/TSBackgroundFetch.h>
[07:37:43]: ▸ ~~~~~~~^
[07:37:43]: ▸ 2 errors generated.

Xcode 11 Errror:
Initializing…

My experience with these kind of things is very low, so please excuse me, if this is a silly question.

Posts: 1

Participants: 1

Read full topic

@nirajhinge wrote:

I have a basic popover like this:

async openPopover(ev: Event) {
    const popover = await this.popoverController.create({
      component: PopoverPage,
      componentProps: {
        id: this.currentUser.id, 
        popoverController: this.popoverController
      },
      event: ev,
      backdropDismiss: true
    });

    return popover.present();
  }

The popover can be disabled by default. But within the popover there is an API request and when it is made it can take 2-5 seconds during which time I want set the backdropDissmiss to false. So I tried something like this on the PopoverPage:

constructor(
      private navParams: NavParams,
  ) {
	  this.pop = navParams.get('popoverController');
  }

delete() {
  this.pop.backdropDismiss = false;
  this.loading = true;
// Api request
}

But this seems to not affect the popover at all and the user can still dismiss it by clicking the backdrop. Is it there a way to set the backdropDismiss property from the popover page or is it not possible?

Posts: 1

Participants: 1

Read full topic