How can i show app with iphone size in all ipad devices like below clip?
1 post - 1 participant
↧
Fixed iphone resolution in ipad
↧
New App version with new plugin installed, Appflow is not pushing the update to existing user
Hi Team,
we have a New App version with new ionic plugins installed (ex: cordova-plugin-firebasex 11.0.3 “Google Firebase Plugin” - cordova-plugin-facebook-connect 2.3.0 “Facebook Connect” - cordova-plugin-inappbrowser 5.0.0 “InAppBrowser”), we are using Appflow to push app updates to existing user who already have the app, while this work fine for GUI and javscript updates it is not pushing the update in new plugins to existing users.
Please advise.
Regards,
1 post - 1 participant
↧
↧
Ionic Vue project fails to serve or build after "vue add pwa"
The “Ionic Build” and “Ionic Serve” commands hang up indefinitely in a fresh Ionic Vue project after adding PWA via “vue add pwa”.
Here is a screenshot after canceling the build command with ctrl+c
Here is a sample fresh repo: link
I am running Ubuntu 20.04, NPM 6.14.16, @vue/cli 4.5.13
1 post - 1 participant
↧
Tests and Modals in React
Has anyone successfully written a test in Ionic React involving a modal?
I started a new project with v6, which uses Jest and React Testing Library. I’m trying to write tests that involve rendering the content of an inline Ionic Modal component, but the content of the component don’t see to be inspectable by React Testing Library.
test('modal should render with title to add ebook', async () => {
render(<MyModalModalComponent trigger="modal-trigger" />);
screen.getByTestId('modal-title');
screen.debug();
});
It seems like the rendered DOM per the debug is just:
<body>
<div />
</body>
Is anyone aware of any guidance specifically on setting up tests involving the Ionic Modal component?
1 post - 1 participant
↧
Can't get basic children route to work
Hi,
I am a complete beginner in Ionic
I’m watching the “Getting Started with Ionic Vue” video and I can’t reproduce the routing thing with a children (23:20 - 25:25).
here is my /router/index.ts:
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import TabsPage from '../views/TabsPage.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/tabs/dressings'
},
{
path: '/tabs/',
component: TabsPage,
children: [
{
path: '',
redirect: '/tabs/dressings'
},
{
path: 'dressings',
component: () => import('@/views/DressingPage.vue'),
children:[
{
path: 'create',
name: 'create',
component: () => import('@/views/AddDressing.vue'),
},
]
},
{
path: 'tenues',
component: () => import('@/views/TenuesPage.vue'),
},
{
path: 'conseils',
component: () => import('@/views/ConseilsPage.vue'),
},
{
path: 'profil',
component: () => import('@/views/ProfilPage.vue'),
}
]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
I can access to http://localhost:8100/tabs/dressings/ and http://localhost:8100/tabs/create but I can’t access to http://localhost:8100/tabs/dressings/create…
What am I missing ?
Thanks for your help
1 post - 1 participant
↧
↧
Camera plugin: after image is taken, does not always appear in view
Working on a project where I have an image placeholder on a view.
When I tap on the image I am accessing the capacitor camera plugin. After capturing the image, it automatically returns to the original view. The first sequence, the new image is not replaced with the image selected from the camera, but instead remains the placeholder image. If I repeat the above sequence a second time it does update the placeholder image.
For resultType i am using base64
1 post - 1 participant
↧
Stripe elements credit card autocomplete / auto fill not working in Ionic mobile app iOS
I am using Stripe elements to collect credit card details. If I deploy my Ionic app to web it works fine on iOS safari and offers to auto fill with my saved credit card as expected.
However if I deploy the same app to mobile it does not offer auto fill on the same device.
Any suggestions on how to resolve this?
Question also here:
1 post - 1 participant
↧
Click-Handler delay when swipe-to-closing IonMenu
Hi everybody,
I experience a problem where my app doesn’t register any click-events right/immediately after swipe-to-closing an IonMenu.
The delay until click events are fired again is about 2 seconds.
I am using "@ionic/react": "^5.5.0"
Some earlier answer suggest using the tappable attribute. But this just throws typescript errors for me when I slap it onto any html element in my react code.
Any idea what I can do to make this weird delay go away? Also very interesting that it doesnt happen when I close the menu via the menucontroller but only when I’m closing it via a swipe gesture…
Thx for reading and maybe somebody has an idea 
1 post - 1 participant
↧
How to toggle an IonMenu in ionic 6 react
Hi everybody,
how do you toggle an IonMenu in react from inside a function? I am aware of the IonMenuToggle component, but that only seems to work from within JSX by wrapping it around a button.
But I don’t want to do that, I just want to toggle a menu from within code, at best via the menuId.
I know that in earlier versions of ionic you could use the menuController to toggle a menu by Id, but after upgrading from ionic v5 to v6 this is apparently no longer possible (it just doesn’t work any more, no errors etc.)
Does anybody have any ideas?
1 post - 1 participant
↧
↧
[ Ionic 6 ] Styling ion-datetime shadow root
Hi Everyone,
How do we style internal part of the ion-datetime if there is no part define in it? I have tried styling in global.css with no luck. Here’s what I’m trying to achieve.
When we want to cycle over the year or months, I want to disable user selection and also set cursor to pointer. I don’t want user to be able to select the text like in the image above. I have tried styling the component as below but its not working.
ion-picker-column-internal {
.picker-item {
cursor: pointer;
user-select: none;
}
}
Below is the generated source for this component.
As we can see in the image above, picker-item is inside shadow dom for the ion-datetime component. We can change the style for it if there is a part attribute defined. However for this component, it is not available.
Anyone have any idea?
Ionic Version : 6.0.0
Thanks
1 post - 1 participant
↧
Geolocation in background (Ionic Angular Capacitor)
I have Ionic Angular app and I need location every 30s no matter if the app is in the foreground or the background. I have @capacitor/geolocation connected and it gives back location just fine while the app is in the foreground, but whenever it goes to the background I get no location back.
I’ve added android.permission.ACCESS_BACKGROUND_LOCATION along android.permission.ACCESS_COARSE_LOCATION android.permission.ACCESS_FINE_LOCATION in Android Manifest but still when I use Geolocation request permissions in the dialog I can give permissions for While I’m using the app and not always.
I also tried with capacitor-community/background-geolocation plugin which also works in the foreground but in background I got notification Location not available.
I’m testing on Pixel6 with the app running on phone from Android Studio and checking Run logs there.
Any help is appreciated!
1 post - 1 participant
↧
Missing the more.svg icon in Ionicons 6.0.1
There’s an icon we’re using currently with an earlier library version of Ionic. It’s called “more”.
It does not exist in the latest version of ionicons. Is there a way to still use the more icon? Should I just downgrade the ionicons library to one with more?
1 post - 1 participant
↧
Anyway to get "console.log" statements to show up in a log off an ios device?
I’m trying to debug an issue that is apparently only happening sometimes on an ios build. When I run the application via xcode the debugger has all of the statements from the “browser” as well as some other logging stuff. Is there any way to get that stuff off of a device not directly running off the debugger on xcode?
Some of the logging statements should tell me what is wrong but I am unable to get at them from the devices where the issue actually is.
1 post - 1 participant
↧
↧
Set font for only one component in ionic react app, leave the rest to default
We have an app that uses the default fonts of the platform it runs on (native android, iOS, different browsers).
We have one button from an external partner that has a specific font (Roboto). When I add the fonts locally in the src folder and add a fonts.css to define the fonts and set the style of the button, all components in my app are in Roboto (all texts, labels etc), which is is not what we want.
Is there a way to only change the font for only this button and leave it to default for all the other components?
App.tsx
import './theme/fonts.css';
fonts.css
@font-face {
font-family: 'Roboto';
src: url('../fonts/RobotoSlab-Regular.ttf');
}
buttons.css
.itsme-buttons-itsme-label {
line-height: 24px;
font-size: 18px !important;
font-family: "Roboto" !important;
font-weight: bold;
text-transform: none;
padding-top: 16px;
padding-bottom: 16px;
letter-spacing: 0px;
}
I only want this button in this font. Any help is appreciated!
1 post - 1 participant
↧
Ion-datetime gradiente white ios
when changing the background color of ion-datetime it gets this white gradient, does anyone know how to change the color of it? note, this only happens on ios.
Ionic:
Ionic CLI : 6.18.1
Ionic Framework : @ionic/angular 6.0.12
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3
Capacitor:
Capacitor CLI : 3.4.0
@capacitor/android : 3.4.3
@capacitor/core : 3.4.0
@capacitor/ios : 3.4.0
Utility:
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v16.13.2
npm : 8.1.2
OS : Windows 10
1 post - 1 participant
↧
[iOS/Safari] Overlapping with
In iOS Safari, when <IonTitle> and <IonBreadcrumbs> are used together in an <IonHeader><IonToolbar></IonToolbar></IonHeader>, the breadcrumbs will overlap the title. This happens on narrow viewports as on an iPhone SE. The breadcrumbs completely overlap the title text, making the text unreadable and the breadcrumbs unusable.
This issue occurs on iOS Safari, not on Android/Windows Desktop.
See this reproducible, minimal test case:
Clone it, install the dependencies and start/build the app.
Note: I am also trying to set a Stackblitz/Sandbox up for this, but encountered some technical issues.
1 post - 1 participant
↧
A newly created Ionic project does not build for android
I just created a new Ionic Project with blank template. After I have added android platform to that project and tried the following command.
ionic cordova build android
I get the following error
ng.cmd run app:ionic-cordova-build --platform=android
An unhandled exception occurred: Project target does not exist.
See “C:\Users\x~1\AppData\Local\Temp\ng-vh8aNb\angular-errors.log” for further details.
[ERROR] An error occurred while running subprocess ng.
Below is my ionic info
C:\x\ionic6\sampleapp>ionic info
Ionic:
Ionic CLI : 5.4.16 (C:\Users\x\AppData\Roaming\nvm\v16.14.2\node_modules\ionic)
Ionic Framework : @ionic/angular 6.0.12
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)
Utility:
cordova-res : 0.15.4
native-run : not installed
System:
Android SDK Tools : 26.1.1 (C:\Users\x\AppData\Local\Android\Sdk)
NodeJS : v16.14.2 (C:\Program Files\nodejs\node.exe)
npm : 8.5.0
OS : Windows 10
I am using NVM for windows in my environment. Any help in resolving the above issue would be highly appreciated
2 posts - 1 participant
↧
↧
Ion Refresher inside div
Hello, I’m trying to provide users of my app the possibility to “pull-to-refresh” in various part of a single page.
For example, in the screenshot I attach, I would like to pull-to-refresh only on the red-bordered div (the refresh spinner should appear on that div, not on the top of the page).
At the moment, I have one ion-content that include all the page. The red bordered element is a div.
Thanks for the help
1 post - 1 participant
↧
What feature can be added in my healthcare mobile application?
Hi developers, I am exploring new features and functionalities that are being used in recent days in the healthcare industry.
1 post - 1 participant
↧
Ionic fails building in macos 12 (Monterey)
ionic gives me error when i did try to build and add android platform to project in macos 12 as below image. even i had the same issue when try to check cordova version in terminal
1 post - 1 participant
↧