In my ionic 5 vue App
popover position in the center of screen, not near the button activated
Im using the code from the doc as below
<template>
<ion-button @click="setOpen(true, $event)">Show Popover</ion-button>
<ion-popover
:is-open="isOpenRef"
css-class="my-custom-class"
:event="event"
:translucent="true"
@didDismiss="setOpen(false)"
>
<Popover></Popover>
</ion-popover>
</template>
1 post - 1 participant
When I generate a fresh ionic app setup (angular), the styling of the header gets all messed up after refreshing the page whilst running the app in ionic labs. When I run the app on an iOS emulator device, the header is also without the proper styling. See this image:
See this link for a video example. Can anybody tell me why this happens? Notice the header in the iOS device… The weird layout shows after a full page refresh.
1 post - 1 participant
Good morning, I am trying to create a small app, I find that I am trying to make a menu with submenus or a list of items with sub items … any example? I am using this code, I would like that clicking on any item will display other items … type submenu
<ion-list-header>
Items with Labels
</ion-list-header>
<ion-item>
<ion-icon slot="end" name="logo-ionic"></ion-icon>
<ion-label>General</ion-label>
</ion-item>
<ion-icon slot="end" name="build-outline"></ion-icon>
<ion-label>Gestión incidencias</ion-label>
<ion-icon slot="end" name="cloud-done-outline"></ion-icon>
<ion-label>Gestión backup</ion-label>
1 post - 1 participant
Hi, I want to create a split screen master-details in react + ionic.
Recently I used framework7, and it does it very simple… but with ionic it’s a bit difficult.
I want something like this:
1 post - 1 participant
Good morning, I am trying to create a small app, I find that I am trying to make a menu with submenus or a list of items with sub items … any example? I am using this code, I would like that clicking on any item will display other items … type submenu
<ion-list-header>
Items with Labels
</ion-list-header>
<ion-item>
<ion-icon slot="end" name="logo-ionic"></ion-icon>
<ion-label>General</ion-label>
</ion-item>
<ion-icon slot="end" name="build-outline"></ion-icon>
<ion-label>Gestión incidencias</ion-label>
<ion-icon slot="end" name="cloud-done-outline"></ion-icon>
<ion-label>Gestión backup</ion-label>
1 post - 1 participant
I have an Ionic React app (v5) with several dozen pages and three tabs.
I’ve noticed that some pages show up as part of one of the three tabs (for example, navigating to the page, going to a different tab, and then returning to the original tab restores that page), while other pages are not attached to any tabs at all.
What determines which pages are attached to which tabs?
2 posts - 2 participants
Hello!
Anyone has any idea why using “ion-item” in combination with “ion-checkbox” and “ng-katex-html” for rendering math formulas is slow when click on ion-checkbox (code below). The checkbox click action is slower when “ng-katex-html” contains html with katex math formulas and is even slower on mobile compared to web (difference reports like 1/3).
When no math formula inside “ng-katex-html”, ion-item’s behavior is just like in ionic demos. It is like additional classes added to elements inside ion-item are slowed down while being added by some thing.
Clicking many times (quickly) on ion-item, the item becomes gray and black due to slow rendering and recovers clicks stop.
Thus, difference is when formulas (already rendered) are clicked.
<ion-item *ngFor="let answer of answers; let i = index;">
<ion-checkbox size="small" slot="start" [(ngModel)]="answer.isSelected"
(click)="selectAnswer(answer)"></ion-checkbox>
<div class="answer-content no-click" *ngIf="answer.text">
<ng-katex-html [html]="answer.text | sanitizeHtml"></ng-katex-html>
</div>
</ion-item>
Help would be appreciated!
Thank you!
2 posts - 2 participants
I’m working my way through the photo gallery tutorial. I got to the second page and inserted the relevant code for the camera business and … no camera icon.
I thought perhaps my laptop’s camera was disabled, so I restarted and checked the BIOS to insure it was enabled. After reboot completed, I installed and ran the cheese app (I’m on XUbuntu, BTW). It showed my selfie self, so I’m sure the camera is working.
I received no errors. (I know this is a possibility because when I first did the copy/paste stuff for views/Tab2.vue it complained about things like
The “IonCol” component has been registered but not used
I commented out the relevant bits from the export default block to get the app and its tabs to display once again.
It seems pointless to continue with the tutorial until I can get the camera bits to display. In the absence of any errors from the server, how can I debug this problem? Is there a resource for help with these sorts of on-the-fly problems? (I tried the Slack link but it’s down.)
2 posts - 1 participant
I’m trying to resolve an issue with the Android status bar on some devices using my app. The problem is that on some devices the status bar disappears and can only be viewed if you pull it down again, but when it goes up it remains hidden. On other devices this does not happen and when using the app the status bar is always visible. I would like to make it always visible because it is a demand from users.
Usually the bar disappears after the splash screen. I tried to use the show() function of the StatusBar plugin, but it doesn’t seem to work. I cannot use the overlaysWebView() function because many interactive elements in my app are overlaid by the status bar.
One thing that is strange is that when I use the this.statusBar.isVisible function, it returns me true, even though it is hidden.
1 post - 1 participant
I want to launch my app on Android Emulator .My Android studio is 4.2. When I hit the command ’ ionic Cordova run android ’ the error show '[ERROR] An error occurred while running Cordova prepare (exit code 1)* ’ . How I solve the error .below is the screen-shot.
1 post - 1 participant
Hello everyone!
I am just new with Ionic and I am trying to start with a new app so I started with:
Updating npm with latest
npm install -g npm@latest
Installing ionic framework CLI
npm install -g @ionic/cli
Starting new app tabs with Capacitor support
ionic start myapp tabs --capacitor
Adding Ionic Native's Hotspot plugin
npm install @ionic-native/hotspot
ionic cap sync
but once the app was ready so I can work on it then it said there were some moderate severity vulnerabilities , so I did as it suggested with npm audit fix --force:
npm audit fix --force
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1693
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@12.0.2, which is a breaking change
npm audit fix --force
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1693
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@0.1102.13, which is a breaking change
npm audit fix --force
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1693
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@0.901.15, which is a breaking change
npm audit fix --force
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1693
fix available via `npm audit fix --force`
Will install @angular-devkit/build-angular@12.0.2, which is a breaking change
which means after four npm audit fix --force it backs to point @angular-devkit/build-angular@12.0.2 as like at first time like a loop.
If I do a npm fund I get:
myapp@0.0.1
+-- https://opencollective.com/typescript-eslint
| | `-- @typescript-eslint/eslint-plugin@4.16.1, @typescript-eslint/experimental-utils@4.16.1, @typescript-eslint/types@4.16.1, @typescript-eslint/typescript-estree@4.16.1, @typescript-eslint/visitor-keys@4.16.1, @typescript-eslint/scope-manager@4.16.1, @typescript-eslint/parser@4.16.1, @typescript-eslint/experimental-utils@4.23.0, @typescript-eslint/scope-manager@4.23.0, @typescript-eslint/visitor-keys@4.23.0, @typescript-eslint/types@4.23.0, @typescript-eslint/typescript-estree@4.23.0
| `-- https://github.com/sponsors/mysticatea
| `-- regexpp@3.1.0, eslint-utils@2.1.0
+-- https://opencollective.com/eslint
| | `-- eslint@7.27.0
| `-- https://github.com/sponsors/sindresorhus
| `-- escape-string-regexp@4.0.0, globals@12.4.0, import-fresh@3.3.0, strip-json-comments@3.1.1, make-dir@3.1.0, open@7.4.2, p-limit@2.3.0, ora@5.4.0, cli-spinners@2.6.0, is-unicode-supported@0.1.0, log-symbols@4.1.0, ansi-escapes@4.3.2, type-fest@0.21.3, figures@3.2.0, onetime@5.1.2
+-- https://github.com/sponsors/mattlewis92
| `-- karma-coverage-istanbul-reporter@3.0.3
+-- https://opencollective.com/babel
| `-- @babel/core@7.14.3
+-- https://github.com/sponsors/epoberezkin
| `-- ajv@6.12.3, ajv@8.2.0
+-- https://tidelift.com/funding/github/npm/autoprefixer
| `-- autoprefixer@9.7.4
+-- https://opencollective.com/browserslist
| `-- browserslist@4.16.6, caniuse-lite@1.0.30001230
+-- https://opencollective.com/webpack
| `-- copy-webpack-plugin@6.4.1, schema-utils@3.0.0, css-loader@3.5.1, file-loader@6.0.0, raw-loader@4.0.0, sass-loader@8.0.2, style-loader@1.1.3, terser-webpack-plugin@3.0.3, webpack@4.44.2, schema-utils@2.7.1
+-- https://opencollective.com/core-js
| `-- core-js@3.6.4, core-js-compat@3.13.1, core-js-pure@3.13.1
+-- https://github.com/avajs/find-cache-dir?sponsor=1
| `-- find-cache-dir@3.3.1
+-- https://github.com/sponsors/isaacs
| `-- glob@7.1.6, rimraf@3.0.2, glob@7.1.7
+-- https://tidelift.com/funding/github/npm/postcss
| `-- postcss@7.0.27
+-- https://github.com/sponsors/ljharb
| `-- object.assign@4.1.2, call-bind@1.0.2, get-intrinsic@1.1.1, has-symbols@1.0.2, object.values@1.1.4, es-abstract@1.18.3, es-to-primitive@1.2.1, is-date-object@1.0.4, is-symbol@1.0.4, is-callable@1.2.3, is-negative-zero@2.0.1, is-regex@1.1.3, is-string@1.0.6, object-inspect@1.10.3, string.prototype.trimend@1.0.4, string.prototype.trimstart@1.0.4, unbox-primitive@1.0.1, has-bigints@1.0.1, which-boxed-primitive@1.0.2, is-bigint@1.0.2, is-boolean-object@1.1.1, is-number-object@1.0.5, util.promisify@1.0.1, object.getownpropertydescriptors@2.1.2, deep-equal@1.1.1, is-arguments@1.1.0, object-is@1.1.5, regexp.prototype.flags@1.3.1, array-includes@3.1.3, array.prototype.flat@1.2.4
+-- https://github.com/sponsors/wooorm
| `-- vendors@1.0.4
+-- https://github.com/sponsors/fb55
| `-- css-what@3.4.2
+-- https://tidelift.com/funding/github/npm/loglevel
| `-- loglevel@1.7.1
+-- https://github.com/sponsors/RubenVerborgh
| `-- follow-redirects@1.14.1
+-- https://github.com/chalk/chalk?sponsor=1
| | `-- chalk@4.1.1
| `-- https://github.com/chalk/ansi-styles?sponsor=1
| `-- ansi-styles@4.3.0
+-- https://github.com/chalk/wrap-ansi?sponsor=1
| `-- wrap-ansi@7.0.0
+-- https://github.com/chalk/slice-ansi?sponsor=1
| `-- slice-ansi@4.0.0
+-- https://github.com/sponsors/gjtorikian/
| `-- isbinaryfile@4.0.8
`-- https://opencollective.com/ua-parser-js
`-- ua-parser-js@0.7.28
I thought with a fresh app start it should be just clean with dependencies so if I would do a npm update, it wouldn’t break everything (already tried in fact and in fact I am re-starting from scratch again)
Maybe I could have missed something even it’s just a fresh starting app to implement… any direction would be appreciate… thanks a lot to all!!
Cheers!!! 
6 posts - 2 participants
Hi,
I know, it is not directly related to Ionic, but as there are a lot of mobile developers around, I would like to see if someone has similar issues at the moment.
Our app is using IndexedDB to store certain data. Since the latest iOS update (14.6), we experience big issues in accessing this database. When the app starts (both the native package, and the website in Safari browser), the app is not able to open the database. The call simply does not come back, no onerror, onsuccess or similar callback is called.
Thanks, Heiner
17 posts - 4 participants
I am using ngx-image-cropper in my ionic app but when I drag and drop for image cropping app start freezes.
image-cropper
[imageChangedEvent]=“imageChangedEvent”
[maintainAspectRatio]=“true”
[aspectRatio]=“4 / 3”
format=“png”
(imageCropped)=“imageCropped($event)”
(imageLoaded)=“imageLoaded()”
(cropperReady)=“cropperReady()”
(loadImageFailed)=“loadImageFailed()”
3 posts - 3 participants
Hello guys, i have following code
<template>
<ion-page>
<ion-content :scroll-events="true" @ionScroll="pullAnimation" class="ion-padding">
<div v-for="i in 60" :key="i">
<h1>dsadasdsad</h1>
</div>
</ion-content>
</ion-page>
</template>
<script>
import { IonContent, IonPage } from '@ionic/vue';
export default {
components: {
IonContent,
IonPage,
},
setup() {
const pullAnimation = () => {
alert('das');
};
return {
pullAnimation,
};
},
};
</script>
This generates alert when i scroll on chrome. But when i scroll on my phone nothing show, its like event isnt even fired up.
6 posts - 2 participants
When I run my app in the emulator, I check my ion toggle and my checkbox alert, but as soon as I close the app and open it again, the changes I made do not remain.
I looked for solutions here on the forum and did not find any similar question.
I used these codes:
Is this because I’m using an emulator or because I didn’t add someone else code to save the user’s changes?
2 posts - 2 participants
CSS enabled
CSS disbled
How to prevent the CSS from disabling?
1 post - 1 participant
@Variable CSS
ion-loading.loading-custom-class .loading-wrapper {
–background: #222;
–spinner-color: #fff;
color: #fff;
–border-radius: 10px; // it wont work
–border-width: 4px;
–border-style: solid;
}
1 post - 1 participant
Logic seems correct however the data process first before the spinner executes??
Composable
useIonic.ts
// import { ref } from 'vue';
import { loadingController } from '@ionic/vue';
export const useIonic = () => {
return {
showLoader,
hideLoader
}
}
async function showLoader (
cssClass= 'loading-custom-class',
message = 'Please wait...',
duration = 0 ,
translucent = false,
backdropDismiss = false,
spinner: any,
): Promise<void>{
const loading = await loadingController
.create({
cssClass,
message,
translucent,
backdropDismiss,
spinner,
duration,
// keyboardClose: true
})
// Show loader
console.log('show loader')
await loading.present();
}
async function hideLoader (): Promise<void> {
console.log('hideLoader called')
await loadingController
.dismiss().then((response) => {
console.log('Loader closed!', response);
}).catch((err) => {
console.log('hideLoader Error occured : ', err);
});
}
Store
import { defineStore } from 'pinia'
import { RegisterData } from '@/components/models'
export const authStore = defineStore({
id: 'authStore',
state() {
return {
users: [],
currentUser: null
}
},
getters: {},
actions: {
async addUser(payload: RegisterData) {
await this.users.push(payload)
return true
},
// removeUser () {}
}
})
**Vue File Setup**
const onSubmit = (values: RegisterData, { resetForm }: any): void => {
showLoader (
'loading-custom-class',
'Loading please wait...',
4000 ,
false,
false,
'dots',
)
try {
auth.addUser(values).then((response: boolean): void => {
if (response) hideLoader()
})
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
resetForm()
} catch (error) {
console.log('Login Error')
}
}1 post - 1 participant
I created a service via “ionic gen service myservices”
I created a page via “ionic gen page mytimeattendance”. This is page i have a slides #mySlider.
I need to use the service i have created to slide #mySlider using slideTo().
However, I am getting the following error:
“ERROR TypeError: Cannot read property ‘slideTo’ of undefined”
2 posts - 2 participants