Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70612 articles
Browse latest View live

Ionic serve –lab not opening in browser

$
0
0

ionic serve --lab does not work
http://localhost:8100/ionic-lab it only shows a white screen
i have installed npm i -D -E @ionic/lab but also doesn’t work when i run ionic serve --lab
what do i miss here ?

ionic info


       Require stack:
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI       : 6.18.1 (C:\Users\Asus\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 6.0.1

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : 3.4.0
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.4.0
   OS     : Windows 10

1 post - 1 participant

Read full topic


Why isn't this css being applied?

$
0
0

I’ve tried applying the below CSS (taken from another forum post here) to limit the screen width on PCs. It doesn’t seem to be getting applied though. I’ve put it in the Ionic variables.css file and also directly imported on a specific page like import "./mycss.css".

@media (min-width: 700px) {
  .app-root {
    width: 700px;
    margin: auto;
    position: relative;
  }

  .scroll-content {
    overflow-y:auto;
  }
}

When I open chrome DevTools it’s saying my width is 1536. So it should be getting applied but it’s not. What am I missing?

4 posts - 3 participants

Read full topic

Auto-incrementing build numbers has suddenly stopped working

$
0
0

Our uplaods to iOS are being rejected saying we’re reusing build numbers :slightly_frowning_face:

We followed Auto-incrementing Build Numbers in Capacitor - Appflow weeks ago and it’s all been working fine, but now are builds are all being rejected saying the number has reset to 1

Odd, as our default value is 2 anyway.

Build log extract :

[16:38:27]: Appflow build script detected...
[16:38:27]: $ npm run appflow:build
[16:38:28]: ▸ > patient-pass-image-upload@0.0.1 appflow:build /Users/ionic/builds/tomchiverton/patient-pass-image-upload
[16:38:28]: ▸ > npx cap-config run appflow.yml -y && npm run build
[16:38:30]: ▸ run ios buildNumber 89
[16:38:30]: ▸ run android versionCode 89
....
[16:42:46]: [iTMSTransporter] 1 package(s) were not uploaded because they had problems:
[16:42:46]: [iTMSTransporter] 	/var/folders/t9/cpm_8j855m5b8jdwdwjcjsp40000gn/T/d20220302-491-tol6n7/1608875982-63f46b64-145d-45a9-9125-ac6c0388d6cb.itmsp - Error Messages:
[16:42:46]: [iTMSTransporter] 		ERROR ITMS-90189: "Redundant Binary Upload. You've already uploaded a build with build number '1' for version number '1.0'. Make sure you increment the build string before you upload your app to App Store Connect. Learn more in Xcode Help (http://help.apple.com/xcode/mac/current/#/devba7f53ad4)."
[16:42:46]: [iTMSTransporter] [2022-03-02 16:42:46 GMT] <main> DBG-X: Returning 1
[16:42:46]: iTunes Transporter output above ^
[16:42:46]: ERROR ITMS-90189: "Redundant Binary Upload. You've already uploaded a build with build number '1' for version number '1.0'. Make sure you increment the build string before you upload your app to App Store Connect. Learn more in Xcode Help (http://help.apple.com/xcode/mac/current/#/devba7f53ad4)."

Our appflow.yml, package.json haven’t changed

Any one else before I raise a support ticket ?

1 post - 1 participant

Read full topic

`` and Breadcrumbs

$
0
0

The <IonBackButton /> component offers a native back-button UX.

However, I am already using breadcrumbs to show the categories to the user. How can I integrate the back button into the breadcrumbs?
The back button is only shown when the user actually navigated to the category since the app start.
When the user accesses the category page directly, the back button is missing - but it would still make sense to show it to the user. But Ionic treats this as the first page since app start - which is technically correct, but not necessarily the best UX from a human perspective.

1 post - 1 participant

Read full topic

Load modules dynamically within pages

$
0
0

Hi,

I have same complex pages with dynamic content.
I want to load the modules dynamically after initialization.
The modules which have to be used depend on a service call which is performed at the initialization of the page.

Any ideas?

Thanks!
Tobias

7 posts - 2 participants

Read full topic

Arquetype capacitor integración with Angular

$
0
0

Good morning, I am dedicated to the development of hybrid applications, I previously worked with Ionic.
I am currently in a Franework Angular team at Mercadona, in which they have created an archetype and monorepo to offer developers the structure, components and others so that they can start working on a solid base.
I am conducting research on capacitors to see if it is necessary to create a capacitor archetype, since Mercadona has made the decision to apply the hybrid mobility layer and we have decided to use Capacitor.

I would like to have a conversation to resolve certain doubts about it.
Would it be possible?

Thank you very much in advance,
Greetings!

1 post - 1 participant

Read full topic

CreateWorker

$
0
0

I declared images for the worker to recognize however, it only recognizes 4 images, whenever I’m replacing that 4 images with other images, it doesn’t return any.

1 post - 1 participant

Read full topic

Have a sticky footer on ionic modal

$
0
0

How do I make the footer within my ion-modal sticky? now it sticks to the bottom of the modal but it should sticky to the bottom of the screen even though its in the modal


The test modal has the footer. I want this footer to stick to the bottom of the screen even though its in the modal its self. Its conditional too, when a user clicks on an item the button within the footer appears, but it is only visible when the modal is pulled all the way up, it should stick to the bottom of the screen

 <ion-modal class="sheet-modal"
    [isOpen]="true"
    [breakpoints]="[0.2, 0.4, 1]"
    [initialBreakpoint]="0.3"
    [backdropBreakpoint]="0.6"
    [backdropDismiss]="false"
    
    >
    <ng-template >
        <ion-header>
            <ion-toolbar>
                <ion-title>{{value}}</ion-title>
                <ion-buttons slot="end">
                    <ion-button *ngIf="false" (click)="collapseSheetModal()">
                        <ion-icon color="secondary" name="caret-down"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        
        <ion-content>
            <ion-list>
                <ion-item *ngFor="let facility of facilitys; let i = index">
                    <ion-label>{{facility.name}}</ion-label>
                    <ion-checkbox (ionChange)="zoomToFacility($event.detail,facility)"  [(ngModel)]="facility.isChecked" [value]="facility" [name]="facility.name" color="secondary" ></ion-checkbox>
                </ion-item>
            </ion-list>
        </ion-content>
        <ion-footer class="footer">
            <ion-toolbar *ngIf="selected">
                <ion-button >
                    View units in {{selected.name}}
                </ion-button>
        </ion-toolbar>
        </ion-footer>
    </ng-template>
    </ion-modal>

3 posts - 2 participants

Read full topic


Can't build ios with error

dynamiclink app startup management

Ionic vue app with firebase doesn't work (can't login to firebase) when built for ios in xcode

$
0
0

Hi,

I have an ionic vue app with firebase for the backend including Firebase auth, firestore, functions etc.

The app performs as expected when run on web. But when I build for ios (for instance via xcode), i can’t login via firebase auth anymore. I understand there’s a 3rd party cordova plugin that seems to handle such cases but is there any other way without using a 3rd party plugin? How do you handle this? Any help of guidance is very much appreciated.

Thanks

1 post - 1 participant

Read full topic

Plugin BLE central stops when in background mode

$
0
0

Hello folks,

scanning stops emitting beacons when screen is off or is the app is in the background

installing background mode - Native Background Mode | Cordova-Plugin-Background-Mode - didn’t help.

does anyone has similar problem and was able to solve it?

any tips, tricks, hack, workarounds or solutions are most welcome!

Best regards,
Marcin

1 post - 1 participant

Read full topic

Wrong focus when checking off a checkbox. How can I deactivate Autofocus?

Scroll down to show searchbar

$
0
0

I’d like to create a searchbar that will be normally hidden and can be showed when the user scroll/pull down, as in the discussion Hide on init, scroll down to show, but with ionic6 the “start-y” parameter doesn’t work. How can I do this? Is possible?
Thanks.

1 post - 1 participant

Read full topic

Deploying Javascript Ionic Vue as PWA

$
0
0

Hello,

I have some issues with my Ionic App. it works great on all my devices, unfortunately I cannot put the app in the store due to some issues not relevant.
But I can deploy this app as a web application, because all the functionality is then still working. But I have some issues getting it to work. For example, I want to deploy my app to a subfolder on my website. But when I run ionic build prod and copy all the contents to the subfolder I get a lot of console errors that the files cannot be found. Probably because the app thinks it is on the root of the website.

Now I found some topics regarding this, but they are all in typescript, while my app is in Javascript:

Does anyone know how to get this working? Thanks!

1 post - 1 participant

Read full topic


CdkVirtualScoll and Keyboard

$
0
0

Used technologies:
Ionic v6, Capacitor 3, Angular

Used Components:
cdk-virtual-scroll-viewport

I have a problem with cdk-virtual-scroll, in practice if I open and close the keyboard while I have a scrolled list in the app, when I return to the list it is not displayed, but if I move the list it reappears.

I have no errors on Android Studio, also this problem does not occur on Ios.

With a video it definitely becomes clearer:
Video On My Drive

1 post - 1 participant

Read full topic

Ionic React styles not rendering even after importing css file

$
0
0

I’m trying to use the ionic ui library(@ionic/react) to create the interface of my app.
I’ve included the core.css file from ionic.
But the components render without styles.

Following is the code in my App.js

import React from 'react'
import { IonButton } from '@ionic/react';


import '@ionic/react/css/core.css';

const App = () => {
  return (
    <>
      <IonButton color="primary">Primary</IonButton>
      <IonButton color="secondary">Secondary</IonButton>
      <IonButton color="tertiary">Tertiary</IonButton>
      <IonButton color="success">Success</IonButton>
      <IonButton color="warning">Warning</IonButton>
      <IonButton color="danger">Danger</IonButton>
      <IonButton color="light">Light</IonButton>
      <IonButton color="medium">Medium</IonButton>
      <IonButton color="dark">Dark</IonButton>
    </>
  )
}

export default App

check this image to see the result

dependencies versions: -
@ionic/react”: “^6.0.9”,
“react”: “^16.13.1”,

1 post - 1 participant

Read full topic

Changing the default hamburger icon of IonMenu

$
0
0

Hi there,

Is there any way to modify the default hamburger icon of the IonMenu class? Spent some time searching but couldn’t get an answer. Below is my code snippet:


    <IonMenu side="end" menuId="first" contentId="main-content">
    <IonHeader>
      <IonToolbar color="primary">
        <IonTitle>Start Menu</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonList>
        <IonItem>Menu Item</IonItem>
        <IonItem>Menu Item</IonItem>
        <IonItem>Menu Item</IonItem>
        <IonItem>Menu Item</IonItem>
        <IonItem>Menu Item</IonItem>
      </IonList>
    </IonContent>
  </IonMenu>

1 post - 1 participant

Read full topic

Is there any free alternative to Code-Push

$
0
0

Is there any free alternative to Code-Push.

I discovered Expo but I don’t know if it’s possible to use it with Ionic

AppCenter discontinued Cordova, my apps are on Ionic 3

2 posts - 2 participants

Read full topic

Angular PWA tab router limitation? android back button can not go back previous page?

$
0
0

Hi

We are developing a PWA with Ioinc 5 + Angular + capacitor, and there is a page with 3 tabs. the current design allows each tab url to be share and reload without any issue.

However, when I open the pwa homepage, then click to open the tab page, and change tab1 to tab2 to tab3, the android back button (at the bottom in all android devices) can only move back to tab 1 from tab3, can not move back to homepage.

Is this a limitation of Angular tab routing? any way I can fix this?

thanks

1 post - 1 participant

Read full topic

Viewing all 70612 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>