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

Unexpected token error in Android 5 but not in Android 8

$
0
0

I am building an Ionic app that should work in devices with Android 8 and Android 5. The app uses two Cordova plugins that I wrote my self, and it works perfectly on Android 8, but when I try it on Android 5 I am getting this error:

I/chromium( 3639): [INFO:CONSOLE(5)] "Uncaught SyntaxError: Unexpected token =>", source: http://localhost/plugins/cordova-plugin-logger/www/Logger.js (5)

Logger.js

var exec = require('cordova/exec');

var java = function(method, args) {
    return new Promise((resolve, reject) => {
        try {
            exec(resolve, reject, 'Logger', method, args || []);
        } catch (err) {
            reject(err);
        }
    });
}

exports.TAG = "LOGGER";

exports.d = function(text) {
    return java("logD", [exports.TAG, text]);
}

exports.e = function(text, err) {
    if (!err && typeof text == "object") {
        err = text;
        text = "";
    }
    if (err && typeof err == "object") err = JSON.stringify(err);
    if (err) text = text + " " + err;
    return java("logE", [exports.TAG, text.trim()]);
}

Same error happens with the other plugin and also in the js file of the plugin. I am using Ionic 6.12.4 and Cordova 10 (I can’t update any of those components due to compatibility issues with the devices).

Any ideas of what the problem may be ?

TIA

1 post - 1 participant

Read full topic


Recommended structure for nested menu hierarchy? (Multliple menu instances vs dynamic menu content)

$
0
0

Let’s say my app has a multi-level hierarchy of content. Say it’s Country, State/Province, and City, for example.
The top-level menu has you select a Country, and then the main content shows info about the country, and you get a menu with a list of States/Provinces, and you can go a level deeper to a menu of cities.

What’s the suggested structure here if I’m using IonMenu, IonSplitPane, and IonReactRouter? Should I have
A) a single ion-menu instance whose content changes depending on application state or router location or whatever? Or,
B) multiple ion-menu instances which are enabled/disabled by a MenuController?

From my limited understanding A) seems easier structurally since I would just have one menu on the top level and one IonSplitPane (which I’m not sure can be nested). But B) has the advantage of each menu being able to maintain its state, slide in over each other for nice transitions, and being able to keep the Country menu inside the same parent component as the Country main content (better code organization). Or maybe there’s an entirely different approach that works better.

Any advice on what approach is preferred and what the basic structure would look like?

1 post - 1 participant

Read full topic

Hide Header and Footer on Scrolling with Animation with IONIC VUE

$
0
0

Hello, Could I ask how to make Hide Header and Footer on Scrolling with Animation in vue. I am confused don’t know how to do it. Someone, please help.

1 post - 1 participant

Read full topic

Ionic build taking too much time

$
0
0

Hi I am building ionic apps for Android & IOS using ionic 4 , For hardware dependency i cant run my ionic apps on browser . So each time i change my code to see the code change effect i have to run it in device , so for that i am using

ionic build

then

ionic cap sync

the ionic build too much time to execute , it eating my productive time , is there any faster or smarter way to run the project on device /simulator after code change.

1 post - 1 participant

Read full topic

Does Ionic Segment able to set smooth scroll?

$
0
0

I try to use the ionic segment component to set a scroll smooth with “scrollIntoView” like below:

            const segmentChanged = (ev) => {
                ev.target.scrollIntoView({
                    behavior: 'smooth'
                })
            }

But I got the result seem like not to work well.

1 post - 1 participant

Read full topic

Ionic build --prod -> CSS mixed up, e.g ion-padding-start

$
0
0

Hi,

when i publish with ionic build --prod, the css get mixed up.

E.g. ion-padding-start published with ionic build (without --prod)

CSS

OUTPUT

and here published with ionic build --prod

CSS

OUTPUT

THX for any advice

Ionic:

   Ionic CLI                     : 6.14.1 (/Users/aj/.nvm/versions/node/v16.1.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 0.1102.11
   @angular-devkit/schematics    : 11.2.11
   @angular/cli                  : 11.2.11
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.3.0) : 1.1.0

System:

   NodeJS : v16.1.0 (/Users/aj/.nvm/versions/node/v16.1.0/bin/node)
   npm    : 7.12.0
   OS     : macOS Big Sur

1 post - 1 participant

Read full topic

Can Ionic develop both mobile and web with one codebase?

$
0
0

Sorry if this sounds silly but can I ask whether ionic can develop both mobile and web with one codebase? I mean I started reading ionic official tutorials and created a new project using the tab template. Then start the project locally in a browser, it seems the UI layout in the browser is still in the mobile format, looking odd on the web. So this got me asking whether ionic is only for developing cross platform mobile apps with one codebase; the same codebase can’t really be deployed as a standard web app (not PWA)?

1 post - 1 participant

Read full topic

Monorepos with Ionic, Vue, and npm

$
0
0

Originally published at: Monorepos with Ionic, Vue, and npm - Ionic Blog

This is part three of a new series on monorepos. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization. Rounding out our series on monorepos, we take a look at an old friend, but a newcomer to the monorepo game, npm. Npm has long been…

1 post - 1 participant

Read full topic


Newbie question: How to do analytics?

$
0
0

I have many years of experience building websites but now I’m building my first iOS/Android app with Ionic.

I’m using Drupal 9 as the backend and Ionic React for the frontend.

On the web, I’ve always used Google Analytics. For apps, what’s the “standard” practice? I found the Firebase Analytics plugin for Capacitor; is this the “go to” solution?

The only Google Analytics plugins I could find were for Cordova, but my app is running with Capacitor 3 now, and it seems Ionic is dedicated to replacing Cordova with Capacitor.

Any info would be much appreciated. I’m trying to research this but it’s difficult to find current information instead of from a couple years ago (prior to the release of GA4).

1 post - 1 participant

Read full topic

width inside

$
0
0

For some reason div is occupying only ~80% of the parent’s width. How to make it 100%?

ion-item
div style=“width: 100%; padding: 0px; margin: 0px;”
/div
/ion-item

Thank you,
Manju

3 posts - 2 participants

Read full topic

When searching for layer features in map, the coordinates returns empty

$
0
0

When I try to search layer features in OL map using layer.getSource().getFeatures() through a button event, the features returns with their coordinates empty and with an infinity extent:

extent_: (4) [Infinity, Infinity, -Infinity, -Infinity]
flatCoordinates: []

This layer contains Linestring features, but when I tried to make the same thing with another layer, this time with Pointgeometry, the coordinates returned with right values, as expected. This problem only happens with the LineString layer.

I’ve already tried to use a Promise to wait the population of variables, I also tried to use if (layer.getSource().getState() === 'ready') to check the state of function before executing.

All the features are loaded through storage and are created on map, which returns with the right coordinates. If I try to obtain the data of this features after loading it, I can observe the data of the coordinates perfectly. The problem is on the call of the event, which also are fired after the feature loading.

At the moment the code of acquisition of features is:

this.exportFeaturesSubscription = this.datashare.exportFeaturesObservable().subscribe(element => {
    // Get array of features
    let points = this.vectorPoint.getSource().getFeatures(); // Return with correct coordinates
    let lines = this.pathsLayer.getSource().getFeatures(); // Return with empty coordinates
});

1 post - 1 participant

Read full topic

Ionic native HTTP causes cordova plugins not to load

$
0
0

I am building an android app that connects to a custom REST server. I was using Angular HTTP client, but it has some problems when running on the actual device, so I decided to use Ionic’s Native HTTP plugin instead. So I ran:

ionic cordova plugin add cordova-plugin-advanced-http
npm install @ionic-native/http

and it installed normally. I can build the app but then my custom cordova plugins are not being loaded when the app runs, neither does the cordova HTTP plugin. If I remove the native HTTP plugin, then everything works fine again.

I already tried to reinstall all the plugins but the problem persist. Any ideas? I am kind of desperate here :frowning:

Victor

2 posts - 2 participants

Read full topic

Minimize modal to the bottom

$
0
0

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

1 post - 1 participant

Read full topic

nyone know about how to integrate cybersource payment gateway in my ionic app,

$
0
0

Please describe the question in detail and share your code, configuration, and other relevant info.

nyone know about how to integrate cybersource payment gateway in my ionic app,

1 post - 1 participant

Read full topic

Ionic 4 payfort

$
0
0

hi ,
any one have idea payfort with ionic ?
i need make integration pay visa with payfort
i used laravel as backend

1 post - 1 participant

Read full topic


Ionic 5 file plugin : copyFile “NOT_FOUND_ERR”

Two buttons and span/ion-label are not inline

$
0
0

div class=“ion-no-padding ion-no-margin” style=“width: 100% !important; align-items: center;”
button1 /button1
ion-label “Hello” /ion-label
button2 /button2
/div

While the two buttons are inline, the text “Hello” in the middle is aligned to the top of the parent instead of being inline with buttons.

No luck:
I tried “display: inline/block”
Tried replacing ion-label with
Tried padding but moves all the three components together (two buttons and the label)

Thank you,
Manju

1 post - 1 participant

Read full topic

Ion-button and ion-badge vertical align is wrong on hdpi Android

$
0
0

So this is weird. I have the following markup for an ion-button and ion-badge, with the corresponding css.

  • You can see that on hdpi screen (first screenshot), the text labels are incorrectly vertically aligned - too hight up.
  • This is the same build.
  • This is repeatable on any device (physical) that goes above 440dpi.

What gives?

Markup:

<div class="category-button-container">
    <ion-button class="category-button"
      mode="ios" 
      fill="outline" 
      size="small">
      Category 1
    </ion-button>
    <ion-button class="category-button"
      mode="ios" 
      fill="outline" 
      size="small">
      Category 2
    </ion-button>
</div>
<div class="ion-card-custom">
    <ion-card-header>
      <ion-badge>Something</ion-badge>
      <ion-card-title>A title</ion-card-title>
    </ion-card-header>
</div> 

SCSS:

.category-button-container {
    width: 100%;
}
.category-button {
    font-size: 13px;
    font-weight: bold;
    width: 100%;
    text-transform: capitalize;
    // ... unrelated colour styles
}
.ion-card-custom {
    display: inline-block;
    position: relative;
    background-color: var(--ion-color-placeholder);
    border-radius: 10px;
    margin: 0px;
    white-space: normal;   
    margin-right: 12px;
    width: 100%;
    height: 190px;
    text-align: left;

    ion-badge {
        text-transform: uppercase;
    }
  
    ion-card-header {
      position: absolute;
      bottom: 0px;
      left: 0px;
      padding-left: 16px;
      
      // unrelated ....
    }
}

Good:

Bad:

1 post - 1 participant

Read full topic

Ion-item content slides under ion-item-options before closing

$
0
0


When I slide my ion-item to close (to the right), the content slides under the ion-item-options before closing. This results in a poor UX experience as it does not look like a smooth transition. It is not working as it does in the ionic docs. How can I fix this so that when the user slides the item to close (to the right), the options (the icons) disappear before the content gets to it?

1 post - 1 participant

Read full topic

Textarea inside typing same text to entire item-list . e.g xx is typing to all ion-items. how can I solve this issue . Thanks in adavance

$
0
0
<ion-item *ngIf="lead_id == item.sch_lead" class="border" >

  <ion-label>

    <h2 style="text-align:center; color:black; font-size:20px; font-weight:bold" >Company:{{item.company}}</h2>

    <h2 style="margin: 5px;"><strong>Date:</strong>{{item.sch_date}}</h2>

    <h2 style="margin: 5px;"><strong>Time:</strong>{{item.sch_time}}</h2>

    <h2 style="margin: 5px;"><strong>Reason:</strong>{{item.sch_reason}}</h2>

  </ion-label>

  <ion-checkbox slot="end" [(ngModel)]="item.isChecked"   ></ion-checkbox>

</ion-item>

<div class="border" *ngIf="item.isChecked">

  <ion-textarea  placeholder="Notes" clearOnEdit="true" [(ngModel)]="notes"></ion-textarea>

</div>

<div style="text-align:center">

  <ion-button *ngIf="item.isChecked" (click)="saveNotes(item.sch_id)" >Save</ion-button>

</div>

1 post - 1 participant

Read full topic

Viewing all 49380 articles
Browse latest View live


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