Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49237 articles
Browse latest View live
↧

Side menu toolbar header overpainted by WHITE

May 20, 2021, 3:53 pm
$
0
0

I am experiencing a very strange visual artifact when using an ion-menu in overlay mode on some of my screens. The ion menu content is declared to have a toolbar in the header with color=“primary”. It also has a close box button to retract it.

CORRECT RENDERING

The first screen shot shows the side menu rendered correctly, with the main content being overlaid.

tc70x-white-overview-menu-correct
tc70x-white-overview-menu-correct428×732 37.5 KB

INCORRECT RENDERING

The second screen shows shows the header of the side menu and the overlaid content overpainted with WHITE. This overpainting occurs as soon as the drag ends and the menu is fully extended. If I drag the menu to close it, while dragging, the rendering is correct! I am vexed by this problem.

tc70x-white-overview-menu
tc70x-white-overview-menu720×1280 36.6 KB

I am only seeing this on Zebra devices running Android 8.1.1. There is no problem in Android emulator.

Here is the code:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>{{'OVERVIEW_TITLE' | translate}}</ion-title>

        <ion-buttons slot="start">
            <ion-menu-button
                    autoHide="false"
                    menu="left_menu"
            ></ion-menu-button>
        </ion-buttons>

        <ion-buttons slot="end">
            <ion-button (click)="gotoPackageList()">
                {{'PACKAGES' | translate}}
            </ion-button>
        </ion-buttons>

    </ion-toolbar>
</ion-header>

<ion-content #overview_content class="ion-no-padding">
...
MAIN SCREEN CONTENT HERE
</ion-content>

<ion-menu
      side="start"
      type="overlay"
      menuId="left_menu"
      swipeGesture="true"
      contentId="left_menu_content"

>
  <ion-header>
      <ion-toolbar color="primary">
          <ion-title></ion-title>
          <ion-buttons slot="start">
              <ion-button (click)="closeMenu()">
                  <ion-icon name="close-sharp"></ion-icon>
              </ion-button>
          </ion-buttons>
      </ion-toolbar>
  </ion-header>

  <ion-content id="left_menu_content" class="clickable">
      <ion-list class="ion-no-padding">
      ...
      </ion-list>
      </ion-content>
</ion-menu>
    


Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 6.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 21 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.5.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.14.9
   OS         : macOS Catalina
   Xcode      : Xcode 12.4 Build version 12D4e

1 post - 1 participant

Read full topic

↧
Search

How to troubleshoot crash on Android?

May 20, 2021, 5:52 pm
$
0
0

Hello, Ionic app compiled and deployed to google play store. It works fine on all Android devices I have, but it crashes on many devices in a wild west. App crashes on a startup allegedly, when initializing Ionic’s Secure Storage plugin. All what I get in google play console is a limited stack trace:
android.content.ActivityNotFoundException:
at android.app.Instrumentation.checkStartActivityResult (Instrumentation.java:2067)
at android.app.Instrumentation.execStartActivity (Instrumentation.java:1727)
at android.app.Activity.startActivityForResult (Activity.java:5320)
at org.apache.cordova.CordovaActivity.startActivityForResult (CordovaActivity.java:352)
at android.app.Activity.startActivityForResult (Activity.java:5278)
at android.app.Activity.startActivity (Activity.java:5664)
at android.app.Activity.startActivity (Activity.java:5617)
at com.crypho.plugins.SecureStorage.startActivity (SecureStorage.java:240)
at com.crypho.plugins.SecureStorage.access$700 (SecureStorage.java:21)
at com.crypho.plugins.SecureStorage$4.run (SecureStorage.java:217)
at android.os.Handler.handleCallback (Handler.java:938)
at android.os.Handler.dispatchMessage (Handler.java:99)
at android.os.Looper.loop (Looper.java:223)
at android.app.ActivityThread.main (ActivityThread.java:7660)
at java.lang.reflect.Method.invoke (Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:592)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:947)

Any advice?

1 post - 1 participant

Read full topic

↧
↧

Is there an ionic slack?

May 20, 2021, 7:07 pm
$
0
0

I saw there is a slack group here Support - Ionic - The Cross-Platform App Development Leader48z73b_gaMTIwODUyMzI0NS4xNjIwOTg1MzQ1_ga_REH9TJF6KF*MTYyMTU2MjYwNi4xNi4xLjE2MjE1NjI2MTkuMA…

But the link doesn’t seem to work; it says the app is off line.

Is there a slack group for ionic? If so, how to get an invite?
I personally find slack is very useful for exchanging ideas.

1 post - 1 participant

Read full topic

↧

App application directory after live update / deploy

May 20, 2021, 8:33 pm
$
0
0

I have an Ionic v5 app that does live updates using Ionic’s Appflow / Deploy.

This app uses the following two plugins to display an svg in a native photoviewer.
import { File } from ‘@ionic-native/file/ngx’;
import { PhotoViewer } from ‘@ionic-native/photo-viewer/ngx’;

Using this.photoViewer.show(${this.file.applicationDirectory}public/${this.src}) works fine when the binary app is installed.

After updating the content of the app using Appflow / Deploy, the applicationDirectory isn’t updated to match the new content. Any files I reference are the original ones from the binary.

I understand this is a limitation of the Cordova File plugin not being compatible with Appflow updates, but I’m hoping there is a solution to this problem. I’ve looked for a similar Capacitor plugin but I have had no luck. Has anyone found a solution to this problem?

Thanks

1 post - 1 participant

Read full topic

↧

Cash for old Trucks Newcastle

May 21, 2021, 2:00 am
$
0
0

If you have an old truck and you are going to sell it, contact us. Because we give top cash for old trucks in Navcastle.A property is a property and it can benefit you any time but you have to be smart enough to get rid of it at the right time. An unwanted truck is just wastage of the resources and eats up the parking yard space. Also the value goes down be each passing day and you end up with very less if you do not sell it up front. So, do not think too much. It’s time to sell your truck to a wrecker in Newcastle.

1 post - 1 participant

Read full topic

↧
↧

[ERROR] An error occurred while running subprocess capacitor

May 21, 2021, 2:09 am
$
0
0

Hello,
I was working with Ionic Framework using AngularJs. Every Thing was fine. However now, When I am trying to create now Ionic/Angular js Project, I am facing a problem with the capacitor, as following:

e1
e11235×247 10.2 KB

e2
e21804×1050 121 KB

How to solve this problem? I could not found a solution from any of the previous posts.

1 post - 1 participant

Read full topic

↧

How to clear data restore

May 21, 2021, 4:09 am
↧

CLI Error With Angular Projects Only

May 21, 2021, 4:24 am
$
0
0

Setup a new mac and installed Ionic. When running ionic start, I receive the following error. Will note that I am able to create a working version of every other type (Vue, React). Need some guidance on how to get this up and going ASAP as I have a client who has been waiting for me to get my new box up and going

npm i

npm ERR! code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR!

npm ERR! Found: postcss @ 8.2.14

npm ERR! node_modules/postcss

npm ERR! postcss @" 8.2.14 " from @angular-devkit/build-angular @ 0.1102.13

npm ERR! node_modules/@angular-devkit/build-angular

npm ERR! dev @angular-devkit/build-angular @" ~0.1102.4 " from the root project

npm ERR! peer @angular-devkit/build-angular @" ^0.1102.4 " from @ionic/angular-toolkit @ 3.1.1

npm ERR! node_modules/@ionic/angular-toolkit

npm ERR! dev @ionic/angular-toolkit @" ^3.1.1 " from the root project

npm ERR! peer postcss @" ^8.1.0 " from autoprefixer @ 10.2.4

npm ERR! node_modules/autoprefixer

npm ERR! autoprefixer @" 10.2.4 " from @angular-devkit/build-angular @ 0.1102.13

npm ERR! node_modules/@angular-devkit/build-angular

npm ERR! dev @angular-devkit/build-angular @" ~0.1102.4 " from the root project

npm ERR! 1 more (@ionic/angular-toolkit)

npm ERR! 9 more (css-loader, cssnano, postcss-import, postcss-loader, …)

npm ERR!

npm ERR! Could not resolve dependency:

npm ERR! peer postcss @" ^8.2.15 " from cssnano-preset-default @ 5.1.0

npm ERR! node_modules/cssnano/node_modules/cssnano-preset-default

npm ERR! cssnano-preset-default @" ^5.0.1 " from cssnano @ 5.0.2

npm ERR! node_modules/cssnano

npm ERR! cssnano @" 5.0.2 " from @angular-devkit/build-angular @ 0.1102.13

npm ERR! node_modules/@angular-devkit/build-angular

npm ERR! dev @angular-devkit/build-angular @" ~0.1102.4 " from the root project

npm ERR! 1 more (@ionic/angular-toolkit)

npm ERR!

npm ERR! Fix the upstream dependency conflict, or retry

npm ERR! this command with --force, or --legacy-peer-deps

npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR!

npm ERR! See /Users/danieldugger/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/danieldugger/.npm/_logs/2021-05-21T11_17_00_295Z-debug.log

[ ERROR ] An error occurred while running subprocess npm .

npm i exited with exit code 1.

Re-running this command with the --verbose flag may provide more

information.

1 post - 1 participant

Read full topic

↧
Search

Ionic music controls

May 19, 2021, 12:08 am
$
0
0

Hello,

i am writing an mobile app using ionic music control. It works fine on Android, but the problem is, that my code doesn’t work at all on iOS.

Do you have any working example that i can relay on? Or maybe you can take a look at my code:

and point out any issues.

Cheers!

2 posts - 2 participants

Read full topic

↧
↧

Browserlist and browserlistrc both files issue

May 21, 2021, 1:23 pm
↧

Global Error handler not so global

May 21, 2021, 4:18 pm
$
0
0

So I have a global error handler in my ionic app…

When an error is triggered within an rxjs pipe … the handler will receive the error and is sent to the server

But errors on other parts of the code never make it to the global error handler.

I’m on ionic 5. Any ideas?

--- app.module.ts
{ provide: ErrorHandler, useClass: GlobalErrorHandler, deps: [ErrorService] }


--- my global error handler class
import { ErrorService } from "src/app/services/common/error.service";
import { ErrorHandler } from "@angular/core";

export class GlobalErrorHandler extends ErrorHandler {
  constructor(private errorService: ErrorService){
    super()
  }     
      
  handleError(error: any): void {
    // here my code sends the error to the server                            
  }                                                                            
}

Sounds to me that only “ngZone” or “angular” errors are being handled by this. Is there a way I can catch ALL errors?

2 posts - 1 participant

Read full topic

↧

Has anyone with a PWA successfully prompted iOS user to 'Add to homescreen'

May 21, 2021, 6:11 pm
$
0
0

Has any built a PWA and successfully added a prompt on iOS to ‘Add to Homescreen’? It works on Android but not iOS. If been reading mixed responses. Some people are saying that there’s no way to add this feature to iOS because Apple doesn’t want to allow developers to avoid their app store.

This is the only code that I’ve found that will allegedly work but it doesn’t stipulate where this code should be added within the app.

// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => (‘standalone’ in window.navigator) && (window.navigator.standalone);

// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.setState({ showInstallMessage: true });
}
Has anyone implemented a PWA that prompts the ‘Add to homescreen’ in iOS?

Will push notification work if they do that?

1 post - 1 participant

Read full topic

↧

Ionic vue switch tab from another tab

May 22, 2021, 7:42 am
$
0
0

Im using ionic vue tabs starter appliction.
I have a requirement now, to switch tab programmatically from one tab to another

here is my situation

// in Tab1.vue page
setup(props, context) {
 function moveToTab2(){
      // here I need the code to switch tab1 to tab3
      // possible to call tabs.select() method here ?
    }
  }

// my tabs.vue page
<ion-tabs ref="tabs" >

any help is much appreciated, Thank you so much

1 post - 1 participant

Read full topic

↧
↧

How to record a video with a Ionic 5 app + capacitor 3?

May 22, 2021, 8:19 am
$
0
0

Hello,
do you have any suggestion for recording videos?
I’ve tried the Video Capture Plus plugin but when I try to build the App on Android it gives me back an error:

error: unexpected element found in .

I don’t know if the plugin works with Capacitor 3.

Any idea?

thanks.

1 post - 1 participant

Read full topic

↧

Npm install @ionic/cli not response

May 22, 2021, 9:20 am
↧
Search

Accessing a video saved in the filesystem gallery? Capacitor 3 and Ionic 5

May 22, 2021, 10:04 am
$
0
0

I’m using Capacitor 3 and Ionic 5 angular.

I0’ve used the media capture plugin for recording a video and i get a result like this:

[MediaFile]
0: MediaFile
end: 0
fullPath: "file:///storage/emulated/0/DCIM/Camera/20210522_185343.mp4"
lastModified: null
lastModifiedDate: 1621702425000
localURL: "cdvfile://localhost/sdcard/DCIM/Camera/20210522_185343.mp4"
name: "20210522_185343.mp4"
size: 13596835
start: 0
type: "video/mp4"
__proto__: File
length: 1

What should i do if i want to access that video and send, for example, uploading it to my server?

I’ve tried this:

public async addNewToGallery() {
    this.mediaCapture.captureVideo().then(
      (data: MediaFile[]) => {
        console.log(data);
        this.videos.unshift({
          filepath: data[0].fullPath,
          webviewPath: data[0].fullPath
        });

        this.videoUrl = Capacitor.convertFileSrc(data[0].fullPath);
      },
      (err: CaptureError) => console.error(err)
    );
  }

  <ion-grid>
    <ion-row>
      <ion-col size="6">
        <video type="video/mp4" [src]="this.videoService.videoUrl"></video>
      </ion-col>
    </ion-row>
  </ion-grid>

If I inspect the html element i get this:

image
image912×63 10.3 KB

http://capacitor_file/storage/emulated/0/DCIM/Camera/20210522_185343.mp4

but the video doesn’t appear, so i cant play it and i dont know how to use the variable for uploading the video.

can you help me?

thanks

1 post - 1 participant

Read full topic

↧

Exit on double tap hardware Back

May 22, 2021, 10:13 am
$
0
0

I’m looking to implement the now de-facto standard functionality of double tapping the hardware Back button to exit the app.
But I cannot find any guide how to do it on Ionic 5 (and preferably React, but not mandatory).
I looked here - Hardware Back Button - Ionic Documentation - but it didn’t really help.

1 post - 1 participant

Read full topic

↧
↧

Deleting the router page DOM

May 22, 2021, 12:42 pm
$
0
0

Hi, Thanks for this amazing package.

I use React Navigation. The Nested Routes feature runs smoothly.

But when the pages change, they are not deleted from DOM. If I don’t use IonPage, it’s deleted from DOM.

What’s the downside of not using IonPage?
I don’t want to show an effect when you come back.

For performance, it is more accurate to render each page when it is open.

1 post - 1 participant

Read full topic

↧

¿Cómo centrar texto en botón de Alert para Android?

May 22, 2021, 12:58 pm
$
0
0

Quiero centrar el texto del botón de una Alerta para Android, y no sé cómo, qué propiedad CSS debo utilizar o a qué elemento debo apuntar. Si alguien pudiera darme alguna sugerencia o solución al respecto, por favor.

1 post - 1 participant

Read full topic

↧

How move only point A in Google Maps Ionic 3

May 22, 2021, 1:08 pm
$
0
0

I would like move only point A in map, how to make?

I am using watchPosition and DirectionService

To example, I generically created some locations, to simulate a user moving

arrayLatLng = [
    { lat: -1.377174, lng: -48.434815 },
    { lat: -1.376952, lng: -48.434979 },
    { lat: -1.376740, lng: -48.435148 },
    { lat: -1.376506, lng: -48.435301 },
    { lat: -1.376271, lng: -48.435518 },
    { lat: -1.376280, lng: -48.435509 },
    { lat: 1.376197, lng: -48.435553 },
    { lat: -1.376054, lng: -48.435635 },
    { lat: -1.375997, lng: -48.435669 },
]

And I created a loop method

 testeRealtime() {
    for(let i = 0; i < this.arrayLatLng.length; i++) {
        setTimeout(() => {
            let origin = { lat: this.arrayLatLng[i].lat, lng: this.arrayLatLng[i].lng };
            this.startRouteNavigation(origin);
        }, i * 7000);
    }
}

And I have the routing method to create routes

startRouteNavigation(origin){        
    this.directionsDisplay.setMap(this.map);
    this.directionsService.route({
        origin: origin,
        destination: { lat: -1.375997, lng: -48.435669 },  // Latitude e Longitude do imóvel ou corretor, 
        travelMode: google.maps.TravelMode['DRIVING'],
    }, (res, status) => {
        if(status == google.maps.DirectionsStatus.OK){
            this.directionsDisplay.setDirections(res);         
        } else {
            console.warn(status);
        }            
    });
}

would like to create a route a getCurrentPosition and, continue with watchPosition following the direction, but this way create any routes

So, I would like to know the correct way

getWatchPosition() {
     let wat = this.google.maps.watchPsition....
     this.createRoute()....
}

1 post - 1 participant

Read full topic

↧
Viewing all 49237 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>