@reinerluke97 the only cosmetic fix i can see is possibly removing the ripple effect from tab button 3 and adding it to the custom middle button so it more accurately appears to be the point of interaction
[Ionic Tutorial] Beautiful Custom Tabs with Custom Icons
Upgrade to WKWebView causes API calls to fail: 401 Unauthorized
Due to Apple’s upcoming deprecation of UIWebView we are updating our Ionic mobile app to use WKWebView.
API calls to an MVC web application requiring authentication fail, returning 401 Unauthorized. These calls were successful using UIWebView. As WKWebView forces CORS, we are assuming the errors are caused by malformed CORS settings but have not found the root cause or solution. We have tried updating the CORS settings in the servers side API controllers, Global.asax, and web.config as well as the Ionic code.
We do have full control of both server and client side code. Has anyone in this forum experience with this type of setup?
Ionic 4 back button not working
No did’t find anything
Ionic 4 - Nested Tabs Relative Routes
Hi @mrbhaskar ,
Could you please help me to resolve what is “tabPath” in the code because it is unrecognised for me.
Electron - falling at the first hurdle
Changing the base href either manually or via an environment/build setting is the generally accepted way to get apps to function under Electron. I haven’t run into any issues personally doing so.
How to add/override platform files during AppFlow build?
Well, I’ve found a good way achieving it through config.xml file.
Under the relevant platform (Android in my case) I’ve added a directive per file which did the work:
<resource-file src="resources/google-services.json" target="app/google-services.json" />
<resource-file src="resources/gradle.properties" target="gradle.properties" />
<resource-file src="resources/project.properties" target="project.properties" />
<source-file src="resources/Capture.java" target-dir="app/src/main/java/org/cordova/mediacapture" />
BR,
Amit
Capacitor add Plugin from local Folder
You can also use the npm link function in npm.
Dark Mode not working for ionic 5
My project is working in windows dark mode toggle but not working at Android device. What changes i need to do?
HTML and css
What is the question? Did you mean to post the v1 forum?
How do I increase the "" active segment border width in Ionic segment?
can you make a simple demo of this? It’s a bit hard to know what doesn’t work without it
Not able to use capacitor community plugins
Make sure you have done the following steps in your project file:
npm i capacitor-rate-appnpx cap sync
Now open your android platform project (npx cap open android) and see if that solved your issue, if not please reply.
How to round the top edges of the page?
How to round the edges of the page without breaking the transition animations? It happens when I use the CSS below but the animations are broken.
ion-content {
border-top-left-radius: 5% !important;
border-top-right-radius: 5% !important;
-webkit-border-top-left-radius: 5% !important;
-webkit-border-top-right-radius: 5% !important;
overflow: hidden !important;
-webkit-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
-webkit-transform: translate3d(0, 0, 0) !important;
-moz-transform: translate3d(0, 0, 0) !important;
}
Ionic 4 - Nested Tabs Relative Routes
The tabPath is just a local variable that keeps the url path of the current section e.g. “private tabPath = ‘private/interaction/customers/’;”
The tab part is just the sub section so the full path would resolve to “private/interaction/customers/search’;”
Hardware back button with Ionic 4 Disable
Thank you! It’s working for me.
Ion-radio buttons not selecting
Hello! I’m having trouble using (ionSelect) in my Ion Radio Group. I have three choices and placed ionSelect in a different area for each choice to find the correct placement - but it’s not firing! Here is my code:
<ion-radio-group [(ngModel)]="paymentType" (ionSelect)="paymentChosen()">
<ion-item lines="none">
<ion-label lines="none">Cash</ion-label>
<ion-radio slot="start" value="cash" (ionSelect)="paymentChosen()"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label lines="none" (ionSelect)="paymentChosen()">Credit Card</ion-label>
<ion-radio slot="start" value="credit-card"></ion-radio>
</ion-item>
<ion-item lines="none" (ionSelect)="paymentChosen()">
<ion-label lines="none">COD</ion-label>
<ion-radio slot="start" value="cod"></ion-radio>
</ion-item>
</ion-radio-group>
In my .ts file:
paymentChosen(){
console.log('Working!')
}
Nothing logs to the console. What do y’all advise?
Thanks!
Ion-radio buttons not selecting
If you’re not taking any arguments in paymentChosen, I don’t think even if you solve the problem you’re asking about, you’ll end up with any thing useful. I would recommend reading the reactive forms guide, and using FormControls instead of ngModel. That way you can do whatever you’re wanting to do in paymentChosen completely within the controller, avoiding polluting the template with it.
Capacitor/plugin performance
A general question about plugins/Capacitor bridge and performance: how long does it take for a js method call to cross the Capacitor bridge to the native OS?
I’m only talking about the bridge itself, not whatever operation is done after crossing the bridge.
I am sure it depends on the OS and the hardware, but it would be interesting to have a ballpark figure, and I’m certain the Capacitor devs have done such benchmarks.
How to load a sub-component after other parts of the page gets loaded?
For Ionic-Angular app, the page contains several sub-components and I want to load them after other vital components load and gets displayed so that vital components are displayed as soon as possible and other non-essential components can load afterward.
Display badge because of notification from other URL
Hi, suppose I have a menu button, clicking the button displays menu bar in which click event listeners point out to multiple URL. Now I want to show notification badge in both menu button and menu-item from which it is coming.
How can I plan a strategy to execute this kind of function?
Ionic 4: The “src” content of an “img” tag is not updating when I change it from the controller in IOS
I am developing an app for Android and IOS.
I have a profile page where the user can change profile pictures. The photo appears in the view and is changed in real time.
My code is like this in the view:
<img alt="logo" style="width:15vh; height:15vh; border-radius: 50%;" src="{{pictureusuariomenu}}">
pictureusuariomenu is a variable found in the controller.
With that variable what I do is, it is the URL of the image that I upload, I update it there. here is the function:
updateStoredImages(name) {
this.storage.get(STORAGE_KEY).then(images => {
let arr = JSON.parse(images);
if (!arr) {
let newImages = [name];
this.storage.set(STORAGE_KEY, JSON.stringify(newImages));
} else {
arr.push(name);
this.storage.set(STORAGE_KEY, JSON.stringify(arr));
}
let filePath = this.file.dataDirectory + name;
let resPath = this.pathForImage(filePath);
// alert(resPath);
this.urlImage=resPath;
let newEntry = {
name: name,
path: resPath,
filePath: filePath
};
this.images=[]; //borrar las imagenes anteriores (no crear la lista de imagenes)
this.images = [newEntry, ...this.images];
this.urlImage = this.images[0].path;
this.colocarImagenEnProfile(this.urlImage);
this.ref.detectChanges(); // trigger change detection cycle
});
}
In this line:
this.colocarImagenEnProfile(this.urlImage);
What I do is:
colocarImagenEnProfile(newFileName){
this.pictureusuariomenu=newFileName;
}
Now in android is working fine this way of updating the profile image in view:
Before:
After:
But in IOS this isn’t working. The view is not updated at all
Before:
After:
Nothing appears, just a few letters. But the view doesn’t update in IOS.
What could it be?
My specifications:




