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

Object is of type 'unknown' in ion-range dual knobs

$
0
0

any guideline to costume progress-bar as the picture below!
thanks in advance
Sans titre

i have tried this

<ion-item>
      <ion-range
        ref="rangeDualKnobs"
        dual-knobs="true"
        :min="21"
        :max="72"
        :step="3"
        :snaps="true"
      ></ion-range>
    </ion-item>
<script>
import { IonItem, IonLabel, IonList, IonRange } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonItem, IonLabel, IonList, IonRange },
  mounted() {
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  },
});
</script>

but i have got this error

this.$refs.rangeDualKnobs.value “Object is of type ‘unknown’.Vetur(2571)”

i have set

“skipLibCheck”: true,

in

tsconfig.json
but i have still get this error !!

1 post - 1 participant

Read full topic


Capacitor-firebase-auth Cannot contact reCAPTCHA

$
0
0

Hi community, I have a mistake when the apple review the app, I implemented phone auth with capacitor-firebase-auth the versions I’m using is
@capacitor/ios”: “^2.4.8”,
@capacitor/core”: “^2.4.8”,
“capacitor-firebase-auth”: “^2.3.5”,
“firebase”: “^7.24.0”,

this is the specific error

1 post - 1 participant

Read full topic

How can i insert the console tab (in inspect) errors into mysql database?

$
0
0

have researched for few days on how can i insert the console errors (the tab while inspect on the browser) into mysql database but couldn’t find anything relatable.
and am not talking about the console log errors.

what i want to achieve is the runtime errors which can be logged for the production app.
or a way through which i can debug the production app.

it would be great if someone can help.

1 post - 1 participant

Read full topic

Ion-datetime v6 [min] [max] value doesn't work as expected. Can't go back to min date

$
0
0

hello,

i’m using the lastest ion-datetime component and i’ve faced the following issue:

if i choose a min value as starting date, when i swipe months with the arrow and i got forward, i can’t go back to the first month.
For example, if I choose 1st of may 2022 as first available dater and 30th of september as max date if i go to june or july and i try to go back to may, i can’t and the min date available starts from 1st of june.
If i delete the starting date, everything works fine.

As you can see from the following video:

video example

1 post - 1 participant

Read full topic

EDIT - IT'S A IONIC CORE BUG. Ionic 6 - setSelectionRange problem on input type email after upgrading to latest version

$
0
0

After upgrading Ionic Core to version 6.0.7, i suddenly got this error

it’s just an input field of type “email”

it works fine on real device, safari.

Ok it’s a bug introduced in the 6.0.7 version, they are already working for fixing it.

1 post - 1 participant

Read full topic

Ion-modal - Can't enable touch propagation on underlying page

$
0
0

I am trying to let users interact with the underlying page interactable even while the modal is opened.

This would be useful on the new sheet modal to create pages like this:

I’ve taken this picture from this issue, which I’ve not been able to make it work as expected on my example repo.

1 post - 1 participant

Read full topic

Override swipe back threshold

$
0
0

I need to override the createSwipeBackGesture.canStart method to allow swiping back from anywhere on the screen instead of just the edge https://github.com/ionic-team/ionic-framework/blob/be2205e5a2b2f8778bd1f7b4ea5cae0bf96f9ef3/core/src/utils/gesture/swipe-back.ts#L13

I don’t know if it’s possible to extend the code and override that specific method, so I am replacing the entire file at build time to remove the detail.startX condition.

If anyone has a better solution that doesn’t involve overriding the original file that’d be great!

I used the file-replace-loader npm package and the following code in vue.config.js in the root of the project:

const { resolve } = require('path')

module.exports = {
	chainWebpack: (config) => {
		config.module
			.rule('replace-file-swipe-back-gesture')
			.test(/swipe-back\.js$/)
			.use('file-replace-loader')
			.loader('file-replace-loader')
			.options({
				condition: 'if-replacement-exists',
				replacement: resolve('./ionic-core-overrides/swipe-back.js'),
				async: true,
			})
			.end()
	},
}

1 post - 1 participant

Read full topic

Installed app suddenly becomes dark

$
0
0

Hi, i installed my ionic app since 2021 and now interface becomes dark, can anyone tell me how ti fix this ?


becomes

1 post - 1 participant

Read full topic


Changing slides using buttons above swiper

$
0
0

Hi there, I’m new to Ionic React.

I’m trying to change slides using buttons that are placed above Swiper onClick:

const Tab: React.FC = () => {
  const swiper = useSwiper();

  return (
    <IonPage>
        <IonItem class="labels">
          <IonButton onClick={() => swiper.slideNext() }>
            <IonIcon  icon={chatbubbles} color="primary" />
            <IonLabel> Chat</IonLabel>
          </IonButton>
        </IonItem>
        <Swiper className="mySwiper"
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log('slide change')}
        >
          <SwiperSlide>Chat</SwiperSlide>
          <SwiperSlide>Stories</SwiperSlide>
          <SwiperSlide>Topics</SwiperSlide>
          <SwiperSlide>Private</SwiperSlide>
        </Swiper>
    </IonPage>
  );
};

Since Swiper is not initialized before the button, how do I pass swiper to onClick? E.g.

Uncaught TypeError: Cannot read properties of null (reading 'slideNext')

Thanks!

1 post - 1 participant

Read full topic

Create modal on click to ion-tab-button

Can write but not read any file form file.documentsDirectory

$
0
0

I used the cordova-plugin-file-transfer plugin to download files to local system.

No problem for downloading, I could write into the local system

But when I try to access the files, for example to display an video downloaded in the local filesystem, my IOS device does not show any videos.

The files.toURL() correctly returns : file:///var/mobile/Containers/Data/Application/xxxxxxxxxxx/Library/Documents/u1_seq1_ac1_sp01.mp4
Looking to the container shows that the files are inside.

Even this command gives an empty video :
<videosrc=“capacitor://localhost/capacitor_file/var/mobile/Containers/Data/Application/xxxxxxxxxxx/Library/Documents/u1_seq1_ac1_sp01.mp4”/>

Any help please ? Cannot understand why I can write but no read a downloaded file to the local system.

Thanks

1 post - 1 participant

Read full topic

How create nested swiper with swiperjs with ionic angular

$
0
0

I’m trying to build an app where the main page has a set of ion-card. Just one card is displayed on the screen and trough vertical scroll the user can reveal other card (as in instagram with posts).
Every card can have several images. Just one image at time is showed in full screen inside the card and thought horizontal swipe other images are showed. I built a specific component for the card called item-card. Basically there’re two nested swiper (vertical and horizontal).

tab files:

<ion-content>
<swiper class="vertical-swiper" [config]="itemVerticalSwiperConfig">
    <ng-template swiperSlide class="company-slide" *ngFor="let image of images">
      <app-item-card class="item-card"></app-item-card>
    </ng-template>
  </swiper>
</ion-content>
.vertical-swiper {
  height: 100%;
}

.company-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.item-card {
  height: 93% !important;
}
  public itemVerticalSwiperConfig: SwiperOptions = {
    slidesPerView: 1,
    direction: 'vertical',
    spaceBetween: 25,
  };

item-card component files:

<ion-card>
  <swiper class="horizontal-swiper" [config]="imageSwiperConfig">
  <ng-template class="hor-slide" swiperSlide *ngFor="let image of images">
      <img class="full-screen-image" src="./assets/{{image}}" alt="">
    </ng-template>
  </swiper>
</ion-card>
.full-screen-image {
  height: 100%;
  object-fit: cover;
}

ion-card {
  border-radius: 2%;
  height: 100%;
  margin: auto;
  width: auto;
}

.horizontal-swiper {
  height: 100%;
}
  public imageSwiperConfig: SwiperOptions = {
    slidesPerView: 'auto',
    spaceBetween: 0,
  };

At the moment the ion-card seems not fit properly on the image so there’s a margin between the image and the border of the card, as you can see from the following screenshots.

I need the card to be fitted on the image an centered horizontally and vertically in the screen.
Can someone help me in solving this problem ?
Thank you very much in adavance and sorry for my bad English.
I tried to explain at my best :slight_smile:

1 post - 1 participant

Read full topic

Capacitor context issue

$
0
0

Hi , I am building a capacitor plugin for the minew sdk to get and receive beacon data.

I have the ios part working great but I have hit an issue with Andriod.

My plugin code is

    public void startScan(PluginCall call) {
   mMtCentralManager = MTCentralManager.getInstance( this); 
}

The error reads
Required Type: Context
Provided" MinewPlugin

How do I get the correct context so I can attach an instance of this method?

1 post - 1 participant

Read full topic

Multiple list item selection by dragging

$
0
0

Hello everyone,

Anyone ever tried to select across multiple ion-items by dragging across the item list… sort of how we can select multiple emails in the official Apple Mail app?

trying to achieve something like that with ionic but so far can’t find a starting point

any thoughts? appreciate any pointers

Thanks!

1 post - 1 participant

Read full topic

(element) ion-content: HTMLIonContentElement 'ion-content' is not a known element: (child routing)

$
0
0

I add a child routing module (home.routing.module.ts and home.module.ts)

Home.module.ts

import { ApiService } from './../shared/repository/api.service';
import { NavParamsService } from './../shared/providers/nav-params.service';
import { HttpClientModule } from '@angular/common/http';
import { SideMenuModule } from './../shared/components/side-menu/side-menu.module';
import { FooterToolboardModule } from './../shared/components/footer-toolboard/footer-toolboard.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    FooterToolboardModule,
    SideMenuModule,
    HttpClientModule
    
  ],
  declarations: [HomePage],
  providers: [NavParamsService, ApiService]
})
export class HomePageModule {}

app.module.ts

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

/* import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
registerLocaleData(localeEs, navigator.language); */

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    //{provide: LOCALE_ID, useValue: 'es-ES' },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Tslint of Visual code:

(element) ion-content: HTMLIonContentElement

‘ion-content’ is not a known element:

  1. If ‘ion-content’ is an Angular component, then verify that it is part of this module.
  2. If ‘ion-content’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.ngtsc(-998001)

new-user.page.ts(13, 17): Error occurs in the template of component NewUserPage.

Some threads say we need to add ionicModule, but is declared in the app.module.ts

The app run properly, but tslint say that is not correct.

1 post - 1 participant

Read full topic


Build ionic vue app as library to be used in a website

$
0
0

Hi there, is there a way to build an ionic vue app as a library so it can be injected in an existing website? I can get the vue app built as a library by running yarn build which is defined as

"build": "vue-cli-service build --target lib --formats=umd --name helloWorld src/main.ts"

However when I import the generated library into the existing website I can see vue finds the target div and injects the ion-app and ion-router tags but they have nothing inside. I have the feeling that running yarn build doesn’t include any ionic references and that’s why it’s not working. Any ideas?

Thanks

1 post - 1 participant

Read full topic

How to get all pages to print

$
0
0

I’m using capacitor with my Ionic app. The app needs to work not just on mobile but on web as well. Until now I’ve had no problems, however, now I need to print a long page. So what happens when I go to browser > print is only the first page is visible in the print preview and it has a scroll bar. I need to be able to print multiple pages (full document).

I did some googling and only found info on how to get printing to work with Cordova. There’s also an old post related to ionic 2, but that code doesn’t work for me.

#help Thanks!

1 post - 1 participant

Read full topic

Application with ip camera

$
0
0

Hello i have a camera ip (http and rtsp) and i wanted to take some capture on it.
I need to have it on android and IOS. I tried to use the capture media plugins and Streaming Media but it don’t realy work.
Any have an idea of a plugins to help me

Thank you

1 post - 1 participant

Read full topic

How to set a label in between the select value and the arrow (ion-select) React

$
0
0

Hi, i am trying to get a permanent label in the ion select that remains there after making the selection and it has to be between the option i selected and the arrow, in this case the Kgs and grs. Not sure how to do that or if it is possible. Picture for reference
Screen Shot 2022-02-12 at 1.02.09 PM
And this is what i have at the moment

1 post - 1 participant

Read full topic

Editing CSS shadow part of an ionic select text (color) without affecting other instance of ion select

$
0
0

I am trying to edit the color of inside text of an ion select when i pick an option, but once i edit the shadow part in the component, the rest of the ion selects (in other components) are taking this change. I just want to encapsulate this color change, but i can not without editing the shadow part and affecting the rest as they have different colors.
I have tried to put them in different css files but i doesnt work of course.
Example, i have an ion select in a component with this css

ion-select::part(text){
    font-weight: 900;
    color: white;
}

but it gets overwritten with the css of another component that i edit

ion-select::part(text){
    font-weight: 900;
    color: #c00000;
}

Any help with CSS shadow parts it’s appreciate it

1 post - 1 participant

Read full topic

Viewing all 70428 articles
Browse latest View live


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