I’m new to ionic and to css - so forgive my ignorance.

I’ve made a game where I deal 92 cards face down for the user to pick, one by one.

I put the cards in a 12 column grid with 8 rows. For most screen sizes all the cards fit on one screen, but as the screen gets larger, the grid is too large for a screen, and the user must scroll down to get to the bottom.

I played with CSS and found that if I added left and right margins, I could shrink the size of the grid until it fit on one screen - but now when I shrink the screen size, it’s much too small for smaller screens.

I’ve tried to create CSS classes that are “responsive” meaning - I had hoped that different constraints could be used for different screen sizes - but without success.

I (think I) want to operate on the entire grid - but so far my class seems all or nothing - no “responsiveness.”

Can someone help me figure out how to apply a CSS class to ion-grid in a responsive way? Or - tell me how to specify margins (I’m currently using left: 20% -for example) that are “responsive” meaning that I could use different numbers for different sized screens?

I would be most appreciative of any help! thanks!

1 post - 1 participant

Read full topic

async login() {
try {
var r = await this.fAuth.signInWithEmailAndPassword(
this.user.email,
this.user.password
);
if ® {
console.log(“Successfully logged in!”);
…
I didn t find nothing more

1 post - 1 participant

Read full topic

I have an <ion-modal> that contains reactive form on it. The problem is after having filled all the required fields and using push() to add it into the existing array, nothing happens. Here are the snippets:

showcase.page.ts

  openAddItemModal() {
    this.modalController.create({
      component: AddItemPage,
      cssClass: 'itemModal',
      componentProps: {selectedItem: this.showcases}
    })
    .then(modalEl=>{
      modalEl.present();
      return modalEl.dismiss();
    });
  }

showcase.service.ts

private _items: Item[] = [
    new Item('s1', 'Seaside house', 'lorem ipsum', new Date('2019-01-01')),
    new Item('s2', 'Terrace house', 'lorem ipsum', new Date('2019-01-01'))
]

addItem(title: string, description: string, dateAdded: Date) {
  const newItem = new Item(Math.random().toString(), title, description, dateAdded);

    /* Using normal array */
    this._items.push(newItem);
    }

add-item.page.ts

  onAddItem(){
    if(!this.form.valid) {
      return;
    }
    this.showcaseService.addItem(this.form.value.title, this.form.value.description, new Date(this.form.value.dateAdded));
    this.form.reset();
    this.router.navigate(['/showcase/'])
  }

This is reactive form inside the

add-item.page.html

<ion-content>
<form [formGroup]="form">
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Title</ion-label>
          <ion-input type="text" formControlName="title"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Description</ion-label>
          <ion-input type="text" formControlName="description"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row *ngIf="!form.get('description').valid && form.get('description').touched">
      <ion-col size-sm="6" offset-sm="3">
        <p>Description must be between 1 and 200 characters</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Date added</ion-label>
          <ion-datetime
            display-format="MMM DD YYYY" formControlName="dateAdded"></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row size-sm="6" offset-sm="3">
      <ion-button type="submit" color="primary" expand="block" (click)="onAddItem()" [disabled]="!form.valid">Add item</ion-button>
    </ion-row>
  </ion-grid>

2 posts - 2 participants

Read full topic

When you open my Ionic / Angular app in the browser of a mobile device (not the native app), pulling down on the page to refresh the page isn’t working like it would on other websites,

I think the solution around this is to add an ion-refresher to the code, but I’m not sure what method I should call when I refresh the page.

At the moment, I have no typescript code, it is all HTML for now, so I’m not sure what methods I need to call to refresh the page.

Can someone please tell me if using ion-refresher is the correct approach to resolve this problem?

2 posts - 2 participants

Read full topic

I have searched the forum on this topic and have seen previous threads - so I know the issue is there.

One response was very pure - saying that no refresh should be needed - just update the state and angular should take care of refreshing the page.

However, that doesn’t seem to be the case.

I have a problem (in a web view) with recognizing login state with firebase. On the initial loading - the user appears not to be logged in, and only after some time goes by (using subscribe) does the state change to logged in.

My html uses *ngIf to show the user the login state - either the user isn’t - and is a guest - or he/she is - and I should their name in the caption.

I am not getting any refresh of the page when the state changes - so I’d like to force the update - but that seems difficult.

I saw someone suggest re-navigating to home, but that feels wrong to me. I also saw someone suggest calling ionViewDidEnter() again - but again this doesn’t feel right.

Just thought I would ask again - since some of the previous answers were specific to earlier version of ionic…

Is there a simple way to request a refresh of the page?

thanks in advance! This is probably a naive question -

1 post - 1 participant

Read full topic

There are many global properties for Ionic config that require AnimationBuilder type (see https://ionicframework.com/docs/angular/config). An AnimationBuilder needs to be created within IonicModule.forRoot() of app.module.ts.

How does one generate an AnimationBuilder inside of app.module.ts when we don’t have access to the Angular service, AnimationController? Ideally I would just like to call the createAnimation function in @ionic/core but this is not exported in @ionic/angular.

1 post - 1 participant

Read full topic

We are about to start a new project. iOS 14 is out… should we wait for an Ionic 6 or is Ionic 5 safe?

2 posts - 2 participants

Read full topic

Hi, I m working with google plus login in my ionic project, but I am facing an issue called “10”. I tried with client id, web client id but did not work. I searched a lot but did not find a helpful post. Please help, thanks!

1 post - 1 participant

Read full topic

Hello everyone!

As you can see in the video, page is shifted 50% to the left after navigating, and then gets back to normal.
Navigation is fine in browser, this only happens on IOS

Any help is welcome!

Ionic info:

Ionic:

Ionic CLI : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.802.2
@angular-devkit/schematics : 8.2.2
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.2
@capacitor/core : 1.5.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (2 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.15.0 (/usr/local/bin/node)
npm : 6.13.4
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c

1 post - 1 participant

Read full topic

I’m using react-hook-form for form validations. When I use normal DOM as Input element the reset works fine. But when I use IonInput as Controller element, after submission Input values cleared but the errors are still visible.

import { IonItem, IonLabel, IonText, IonInput, IonButton, IonGrid, IonRow, IonCol } from '@ionic/react';
      import React, { useRef, useState, useEffect, useContext } from 'react';
      import { useForm, Controller } from "react-hook-form";
  
  const defaultValues = {
    name: "",
    email: ""
  };
  
  const ContactForm: React.FC = () => {
    const { control, errors, handleSubmit, reset, formState  } = useForm({
      defaultValues: { ...defaultValues },
      mode: "onChange"
    });
  
    const showError = (_fieldName: string, msg: string) => {
      let error = (errors as any)[_fieldName]; 
      return error ? (
        (error.ref.name === _fieldName)? (
          <div className="invalid-feedback">
          {error.message || `${msg} is required`}
        </div>
        ) : null
      ) : null;
    };

    const onSubmit = (data: any, e: any) => { console.log(data);
        console.log(errors);
        // reset({ name: '', email: '', company: '', phone: '', message: '' });
        reset(defaultValues);
    }
  
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <IonGrid>
                <IonRow>
                <IonCol>
                    <IonItem class="ion-no-padding">
                        <IonLabel position="stacked">Name <IonText color="danger">*</IonText></IonLabel>    
                        <Controller
                            as={IonInput}
                            control={control}
                            onChangeName="onIonChange"
                            onChange={([selected]) => {
                            return selected.detail.value;
                            }}
                            name="name"
                            placeholder="John"
                            defaultValue=""
                            rules={{
                            required: true,
                            pattern: {
                                value: /^[A-Z0-9 ]{2,25}$/i,
                                message: "Invalid Name"
                            }
                            }}
                        />
                    </IonItem>
                    {showError("name", "Name")}
                </IonCol>
                </IonRow>

                <IonRow>
                <IonCol>
                    <IonItem class="ion-no-padding">
                        <IonLabel position="stacked">Email <IonText color="danger">*</IonText></IonLabel>
                        <Controller
                            as={IonInput}
                            control={control}
                            onChangeName="onIonChange"
                            onChange={([selected]) => {
                            return selected.detail.value;
                            }}
                            name="email"
                            placeholder="john@example.com"
                            rules={{
                            required: true,
                            pattern: {
                                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                message: "Invalid Email Address"
                            }
                            }}
                        />
                        </IonItem>
                        {showError("email", "Email")}
                </IonCol>
                </IonRow>
                    
            </IonGrid>
            
            <IonButton className="ion-margin-top" expand="block" type="submit">
                Submit
            </IonButton>
        </form>
       );
     };
  
      export default ContactForm;

Anyone can help this?

1 post - 1 participant

Read full topic

Hi community,

I am trying to increase the padding for the ion-item-option because i need this options to be bigger since the users are using gloves and options might be a little too small. I have tried several ways but i do not see --padding-start option for this element on the documentation.

Thanks in advance.

1 post - 1 participant

Read full topic

Is there a working SAML authentication solution for Ionic? We need to build an app that uses SAML authentication to access our enterprise ADFS.

1 post - 1 participant

Read full topic

Is there any way to set the ion-back-button text font size?

I am able to set the icon size with CSS variables, but can’t find a way to set the text size.

I am using ionic v5.

Thanks.

1 post - 1 participant

Read full topic

I have developed an app which uses facebook login.
I used ionic facebook plugin with firebase user authentication.
The app perfectly working with devices Facebook app is not installed. If facebook app is installed in a device plugin open the login view through the facebook app and it is not working.
Is there any way to bypass the FacebookApp even if it’s installed and just go like Facebook app is not installed in the device?

this.fb.login([‘email’])
.then((response: FacebookLoginResponse) => {
this.onfbLoginSuccess(response);
console.log(response.authResponse.accessToken);
}).catch((error) => {
console.log(error.errorMessage)
window.alert(error.errorMessage)
});

1 post - 1 participant

Read full topic

We use Angular and Ionic 4 for an application, and we need to navigate to a specific page by passing through others to create a router history.

As of now, we allow the user to go back using the back button, we had to create a stack of routes and go through them, but we can see on screen the navigation happening automatically through all of the routes, which is a terrible UX.

Here’s a piece of the code for the routes:

public async navigateRoutes() {
    await this.navCtrl.navigateRoot([routes.root]);
    for (let i = 0; i < routes.history.length; i++) {
        await this.router.navigate([routing.history[i]]);
    }
 }

Thinking about it, what else I’d love how to know how to do is how to insert routes into router history, but only navigate to the last one.

Any thoughts?

1 post - 1 participant

Read full topic

0

I am a IONIC newbie I have following function that returns membership plan.

async getMembership(){
await this.Products.WooCommerceAPI().get(‘memberships/plans’).then( (data) => {
this.plans = data.data.map(e => ({

   // used spread method here to call another function that gets the price 
    ...e,
    price: this.getPlanPrice(e.access_product_ids[0]).then(async (res) => {
      return  await res;
    }),
  }));
}).catch((error) => {
  // Invalid request, for 4xx and 5xx statuses
  console.log('Response Status:', error.response.status);
  console.log('Response Headers:', error.response.headers);
  console.log('Response Data:', error.response.data);
})
.finally(() => {
  // Always executed.
});
console.log(this.plans);

}

in this function I used another function that gets price of each membership using ... spread method.

    async getPlanPrice(id): Promise<any> {
    if (id !== undefined) {
      return await this.Products.WooCommerceAPI().get('products/' + id).then(data => {
        return data.data;
      });
    } else {
      return 0;
    }
  }

but the problem is

price: this.getPlanPrice(e.access_product_ids[0]).then(async (res) => {
          return  await res;
        }),

this part return [Object Promise] I have tried everything but can’t get price for example 500 insdeat of this object promise.

1 post - 1 participant

Read full topic

Hi,
I’m using the plugin AppAvailability to check if an app is installed on a device.

I’m using it in this way:

    this.appAvailability.check(appUrl).then(flag => {
      console.log('--->appAvailability-flag:', flag);
      this.isAppAvailable = flag;
    });

Where appUrl is “newapp://” for Android and “com.newapp.stag” for iOS.

On Android it works, on iOS I have the error:

-canOpenURL: failed for URL: "newapp://" - error The operation could not be completed (OSStatus error -10814)
THREAD WARNING: ['AppAvailability'] took '14.01' ms. Plugin should use a background thread.

I’ve added to Info.plist (as described in https://github.com/ohh2ahh/AppAvailability and in https://medium.com/@guanshanliu/lsapplicationqueriesschemes-4f5fa9c7d240) the string “newapp” to the array LSApplicationQueriesSchemes, but I still get the same error.

Which could be the problem according to you?
Is still possible on iOS to check is an App is available?

Thank you

cld

2 posts - 2 participants

Read full topic

My requirement:
Show time picker within the range of 60 minutes.
(i.e) from now till next 60 minutes - user shall select a time.

Challenge / Problem :
In general it works fine, except one scenario.
If the user opens the time picker by 11:00 PM - the picker is not showing any value.
(i.e) as the maximum value for this case falls on the next day - the picker values are not showing properly.

Any help on this - would be really appreciable.

My html -
<ion-datetime picker-format=“HH:mm” [min]=“minTime” [max]=“maxTime” (ionFocus)=“setMinMaxTime()” >

js/ts file -
setMinMaxTime() {
this.minTime = (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString();
this.maxTime = (new Date((new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).getTime() + 60 * 300 * 1000).toISOString());
}

1 post - 1 participant

Read full topic

I’m passing some data, which is an array of objects, from one component to a page. For this I’m using a service with a Subject and an Observable, like this:

myservice.service.ts

public mySubject = new Subject<{ data1:string, data2:number, data3: Object }[]>();
public myObservable = this.mySubject.asObservable();

I’m sending the data from the component to my page this way, which is the way I pass data from components and between pages from some time:

mycomponent.component.ts

this.myService.mySubject.next(myData);

And I’m receiving the data in my page this way:

mypage.page.ts

ngOnInit() {
	this.mySubscription = this.myService.myObservable.subscribe(data => {
		console.log(data); // I can see the data in console
		console.log(data.length); // Returns 0
	
		// process data
		...
	});
}

...

ngOnDestroy() {
	this.mySubscription.unsubscribe();
}

Well, my problem is that when I try to process the data, it is empty. If I check the data on the console, I can see that it is there, even though it appears with the empty array icon, but I can open it and see the info. Just below the size of this array is returned as 0, which suggests that the variable has not yet been populated at the time I am trying to process it, but is already populated by the time I check the console.

I would like to know a way to carry out the processing only when this variable is actually populated. This is the first time that something like this happens with this methodology, I imagine it is due to the size of the array (30 objects +).

1 post - 1 participant

Read full topic

Hi there, I’m not sure if I’m in the right place to ask this, but any help anyone can provide would be appreciated.

I’m developing a project using Cordova/Ionic 3, and I’m trying to add the javascript-obfuscator plugin following this guide.

I’ve installed the javascript-obfuscator package via NPM, I’ve got a config folder with a copy of webpack.config.js in that’s being recognised and used. I’ve added my plugin:

var JavaScriptObfuscator = require('webpack-obfuscator');

And in the plugins section:

  plugins: [
    new Dotenv({
      path: '.env.dev', // load this now instead of the ones in '.env'
      systemvars: true, // load all the predefined 'process.env' variables which will trump anything local per dotenv specs.
      silent: true // hide any errors
    }),
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
    ionicWebpackFactory.getCommonChunksPlugin(),
    new JavaScriptObfuscator({
      stringArrayEncoding: 'base64'
    })
  ],

But when I run the ionic cordova run android command, I get the following output:

PS C:\MobileDev\sd-site-induction> ionic cordova build android
> ionic-app-scripts.cmd build --target cordova --platform android
[15:53:49]  ionic-app-scripts 3.2.4 
[15:53:49]  build dev started ...
[15:53:50]  clean started ...
[15:53:50]  clean finished in 7 ms
[15:53:50]  copy started ...
[15:53:50]  deeplinks started ...
[15:53:50]  deeplinks finished in 451 ms
[15:53:50]  transpile started ...
[15:54:04]  transpile finished in 13.94 s
[15:54:04]  preprocess started ...
[15:54:04]  preprocess finished in 1 ms
[15:54:04]  webpack started ...
[15:54:04]  ionic-app-script task: "build" 
[15:54:04]  TypeError: Cannot read property 'emit' of undefined 
TypeError: Cannot read property 'emit' of undefined
    at WebpackObfuscator.apply (C:\MobileDev\sd-site-induction\node_modules\webpack-obfuscator\dist\index.js:22:24)
    at Compiler.apply (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\node_modules\tapable\lib\Tapable.js:375:16)
    at webpack (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\node_modules\webpack\lib\webpack.js:33:19)
    at C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:132:24
    at new Promise (<anonymous>)
    at runWebpackFullBuild (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:113:12)
    at webpackWorker (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:70:19)
    at Object.webpack (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\webpack.js:29:12)
    at bundleWorker (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\bundle.js:13:22)
    at Object.bundle (C:\MobileDev\sd-site-induction\node_modules\@ionic\app-scripts\dist\bundle.js:6:12)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

Any ideas why this is happening, or what the error means?

Thanks,
bengrah

1 post - 1 participant

Read full topic