can you tell me solution to build two tabs like this.

image472×585 10.3 KB

1 post - 1 participant

Read full topic

I have a form which is built using ion-content that has several ion-input fields inside of them. Whenever I click into one of the input fields (emulating on Google Chrome), the entire ion-content slides to the left. When I click on a different input field, or double click on an input field, the content slides back to its original position in the middle of the screen.

I need help figuring out how to fix the ion-content such that no matter what is being clicked, there is no movement in the x direction.

Thank you for the help!

Here is a snapshot of some of the relevant HTML:

Screen Shot 2020-07-16 at 1.40.07 PM924×785 96.3 KB

1 post - 1 participant

Read full topic

Hey, I am using Ionic 5 for making a PWA for web, ios, android, and desktop using electron. so I was able to work around with GoogleAuth and OutlookAuth using the Plugins from ‘@capacitor/core’ then Plugins.GoogleAuth.signIn() but the issue is this google auth is working in all other platforms but not the only electron it just gives and error about data not found. In case of Plugins.OAuth2Client.authenticate(oauth2Options) it just simply opens the mini browser and closes immediately causing an error…

1 post - 1 participant

Read full topic

Hi there,
I would like to customize my ionic tabs menu like the one in the image below. I am using ionic5. Any idea how?

3 posts - 2 participants

Read full topic

My company forced us to upgrade Mac and test iphone 7 to 13.5.1.

Finally able to build app (as normal I start fresh with installing node modals and remove and add ios 5.1).
Now getting problems testing app on said iphone.
I can get the app to work if I don’t do a prod build.
Everything being the same, just one build using --prod another not.

No build errors. Open in Xcode, no build errors. Pushed build to phone. Get errors in log.
See something similar as its loading.

On our login screen just tapping into a text field get this error.

ERROR: ERROR Error: StaticInjectorError[l]:

StaticInjectorError[l]:

NullInjectorError: No provider for l!

Every time a key is pressed. This is the cause of something else.

Strange thing is push same build to iphone 8 simulator running 13.5 no errors.
Honestly I’m not sure what else to do.

Any idea why a prod build now on 13.5.1 would cause this?

Cordova CLI       : 8.0.0   
Cordova Platforms : android 8.1.0, browser 5.0.4, ios 5.1.1

1 post - 1 participant

Read full topic

This is for Ionic 5, Angular 9, Capacitor 2.

Most of this app users have low vision ability. I need to make the capacity for user to adjust the font size in all areas. I am making variables in variables.scss:

--normalprint: 14px;
--titleprint: 18px;
--largetitleprint: 22px;
--font-size-adj: 1.4vw;

In the other scss files, I can refer those variables and calculate:

.normalprint {
font-size: calc(var(--normalprint) + var(--font-size-adj));
text-align: left;
}

But how to do it dinamic from user input? I want to use a “font-size-adj” value entered from the user. But I don’t see the way to use it.

Thank you.

1 post - 1 participant

Read full topic

Hello!

I am creating an application with two pages: a home page(displaying different workspaces), and a page for editing a workspace once it is clicked.

The home page uses the standard <ion-menu>, while the workspace page uses the standard <ion-split-pane>.

I am navigating between the two pages with a button press. To navigate to the workspace page:

goToWorkspace() {
    this.route.navigate(["/workspace"]);
  }

And, to navigate from the workspace page back to the home page (the root page):

goHome() {
    this.route.navigate(["/"]);
  }

Both use the angular router.

The problem is that when I navigate to and from these pages, the menu bar breaks down for both. Going from workspace to home causes the menu toggle in the top left to disappear, and navigating from home to workspace causes the split pane to disappear.

I have tried using the deprecated navController, but the same behavior remains.

Here is the HTML for home.page.html:

<ion-menu
  type="push"
  content-id="main-content"
  persistent="true"
  auto-hide="false"
  mode="ios"
  style="--side-max-width: 100px;"
>
  <ion-content>
    <ion-list lines="none">
      <ion-item
        *ngIf="afAuth.authState | async as user"
        style="padding-top: 20px; margin-bottom: 20px;"
      >
        <ion-avatar slot="start">
          <img [src]="user.photoURL" alt="?" />
        </ion-avatar>
        <ion-label>
          {{user.displayName}}
        </ion-label>
      </ion-item>
      <!-- Handle sign out and global tags (click)="presentPopover($event)"-->
      <ion-button
        expand="block"
        (click)="auth.signOut()"
        style="
          margin-top: 20px;
          padding-right: 10px;
          padding-left: 10px;
          margin-bottom: 20px;
        "
        >Log Out</ion-button
      >

      <!-- render if we do not have a user -->
    </ion-list>
  </ion-content>
</ion-menu>
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<!-- MAIN CONTENT AREA -->
<div class="ion-page" id="main-content" mode="ios">
  <!-- TOOLBAR -->
  <!-- TOOLBAR -->
  <!-- TOOLBAR -->
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-menu-toggle>
          <ion-button>
            <ion-icon slot="icon-only" name="menu"></ion-icon>
          </ion-button>
        </ion-menu-toggle>
      </ion-buttons>
      <ion-title>Marion - Home </ion-title>
    </ion-toolbar>
  </ion-header>
  <!-- MAIN CONTENT -->
  <!-- MAIN CONTENT -->
  <!-- MAIN CONTENT -->
  <ion-content class="ion-padding">
    <!-- RENDER ALL THINGS -->
    <app-workspaces></app-workspaces>
  </ion-content>
</div>

Here is the HTML for workspace.page.html:

<ion-split-pane
  when="xl"
  content-id="main-content"
  persistent="true"
  auto-hide="false"
  mode="ios"
  enable-menu-with-back-views="“true”"
  style="--side-max-width: 100px;"
>
  <ion-menu
    type="push"
    content-id="main-content"
    #mymenu
    style="--side-max-width: 100px;"
  >
    <ion-content>
      <ion-list lines="none">
        <!-- User information, allowing for signing out -->
        <ion-item style="padding-top: 20px; margin-bottom: 20px;">
          <ion-avatar slot="start">
            <img
              src="https://pbs.twimg.com/profile_images/1206645456450793474/x0o6c-tz.jpg"
            />
          </ion-avatar>
          <ion-label>
            <h2>Username</h2>
          </ion-label>
        </ion-item>
        <ion-button
          expand="block"
          style="
            margin-top: 20px;
            padding-right: 10px;
            padding-left: 10px;
            margin-bottom: 20px;
          "
          >Add (note or item)</ion-button
        >
        <ion-item
          ><h5>
            Popover contains sign in/out, and global tags modal
          </h5></ion-item
        >

        <ion-menu-toggle auto-hide="false">
          <ion-item button (click)="goHome()" id="nav-button">
            <ion-icon slot="start" name="arrow-back-outline"></ion-icon>
            <ion-label>
              Back to Workspaces
            </ion-label>
          </ion-item>
          <ion-item button>
            <ion-icon slot="start" name="documents-outline"></ion-icon>
            <ion-label>
              All
            </ion-label>
          </ion-item>
          <ion-item button id="nav-button">
            <ion-icon slot="start" name="trash-outline"></ion-icon>
            <ion-label>
              Trash
            </ion-label>
          </ion-item>
          <ion-item button id="nav-button">
            <ion-icon slot="start" name="git-network-outline"></ion-icon>
            <ion-label>
              Map
            </ion-label>
          </ion-item>
          <ion-item button id="nav-button" style="margin-bottom: 20px;">
            <ion-icon slot="start" name="pricetags-outline"></ion-icon>
            <ion-label>
              Local Tags
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
      <!-- TAG SECTION -->
      <ion-item-divider color="light" style="margin-bottom: 20px;">
        Tags
      </ion-item-divider>
      <ion-list lines="none">
        <ion-menu-toggle auto-hide="false">
          <!-- Example Tag Group -->
          <ion-item>
            <ion-chip color="primary">
              <ion-icon name="pricetag-outline"></ion-icon>
              <ion-label color="dark">Class 1</ion-label>
            </ion-chip>
          </ion-item>
          <ion-item>
            <ion-chip color="warning">
              <ion-icon name="pricetag-outline"></ion-icon>
              <ion-label color="dark">Week 1</ion-label>
            </ion-chip>
          </ion-item>
          <ion-item>
            <ion-chip color="danger">
              <ion-icon name="pricetag-outline"></ion-icon>
              <ion-label color="dark"
                >Ionic Sub-Menu Replaces ion-select</ion-label
              >
            </ion-chip>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <!-- MAIN CONTENT AREA -->
  <div class="ion-page" id="main-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-buttons slot="start">
          <ion-menu-toggle>
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-buttons>
        <ion-title
          >CS348 (background color matching the workspace color)
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <!-- Man Content Area Rendered Here (Kieran)-->
    <ion-content class="ion-padding">
      <h1>Main Content Area</h1>
    </ion-content>
  </div>
</ion-split-pane>

Thank you!

1 post - 1 participant

Read full topic

At the beginning, all worked fine to tranfer files to MongoDB-db but after an upgrade of Android (to Android 10) I can’t tranfer any picture to my MongoDB-db.

async uploadImages(images: string[]){
    for (let i = 0; i< images.length; i++){
      const element: string = images[i];
      let elementName: string = element.substr(element.lastIndexOf('/')+1);
      console.log('elementName', elementName);

      let fileTransfer: FileTransferObject =  this.transfer.create();
      const url: string = `${environement.api_url}/Containers/photos/upload`;
      console.log('url', url);

      let options: FileUploadOptions = {
        fileKey: 'Clothy',
        fileName: elementName,
        //chunkedMode: false,
        mimeType: 'image/jpeg',
        headers: {}
      }
      if (!this.imgUploaded){
        let data = await fileTransfer.upload(element, url, options);
        console.log('data', data);
        let id: string = JSON.parse(data.response)._id
        console.log('id', id);
        console.log('typeof id', typeof id);
        this.article.pictures.push(id);
        this.numImgUpload += 1;
      }
      if (this.numImgUpload === images.length){
        this.imgUploaded = true;
      }
    }
    return true;
  }

and I raise this error :

debuggeur1097×378 39 KB

I read File Transfer was deprecated and I tried this https://github.com/silkimen/cordova-plugin-advanced-http
But I get an error :

Cannot find module '@ionic-native/http/ngx'.

My config

config950×824 20.2 KB

If someone can help

2 posts - 2 participants

Read full topic

Hi there,
after install node_modules then ionic serve giving error anyone suggest me how to resolve it.

2 posts - 2 participants

Read full topic

Below is an example containing an IonList.

When using React, how can I trigger IonList’s closeSlidingItems() method?

import React from 'react';
import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';

export const ListExample: React.FC = () => (
  <IonContent>
    {/*-- List of Text Items --*/}
    <IonList>
      <IonItem>
        <IonLabel>Pokémon Yellow</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Mega Man X</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>The Legend of Zelda</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Pac-Man</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Super Mario World</IonLabel>
      </IonItem>
    </IonList>
  </IonContent>
);

1 post - 1 participant

Read full topic

It is not good to provide access origin * to access backend APIs from any short of source.

Is there any good way to bypass and restrict to hits from my app only.

I dont want to use native http it is hard to debug in web app and takes more time of dev finish

Thank you

1 post - 1 participant

Read full topic

Hi all, I am using Ionic React Tabs for a music application. I have a quick question on how to handle an IonRouterOutlet for tabs that share the same page component across tabs. For example, my application has two pages:

• Search Page
• Feed Page

On both the Search and Feed pages, I need to allow a user to route to an Artist page. According to the documentation, I should be making my IonRouterOutlet look something like the following in my App.tsx:

<IonRouterOutlet>
    <Route path="/:tab(search)" component={Search} exact />
    <Route path="/:tab(search)/artist/:artistId" component={Artist} exact />
    <Route path="/:tab(feed)" component={Feed} exact />
    <Route path="/:tab(feed)/artist/:artistId" component={Artist} exact />
</IonRouterOutlet>

This is manageable so far, but now on each Artist page, a user can click an Album so I’d have to add another Route for both the Search and Feed tabs to account for the ability to route to /(whatever-tab)/album/:albumId. This is getting quickly out of hand because I have several shared components that are used amongst several tabs (4 tabs in my actual app). Is there a better way to handle this?

As mentioned in the docs, path simply uses regex to match the url. Is there a way to do something like:

<IonRouterOutlet>
    <Route path="/:tab(search)" component={Search} exact />
    <Route path="/:tab(feed)" component={Feed} exact />
    <!-- updated the following line --->
    <Route path="/:tab(search || feed)/artist/:artistId" component={Artist} exact />
</IonRouterOutlet>

So it can match several tabs based on what I pass as the current tab from the match props to my routerLink?

What’s the best practice here? The example tabs app doesn’t even use this :tab() syntax…is this out of date now? Thanks!

1 post - 1 participant

Read full topic

I tried using some Cordova plugins that do not work for me. if anyone has experience with this help me to sort out this problem.

cordova plugin add cordova-plugin-sign-in-with-apple this plugin does not work for me.

1 post - 1 participant

Read full topic

Hi everyone,

I am trying to make a request to show a WebView using InAppBrowser plugin, but I need to send some headers to get the content, and InAppBrowser does not offer me this option.

I don’t know if there is any way to do it using this plugin, or I need to find another one than can do it.

Thank you for your time in advance.

Hope to hearing from you soon.

1 post - 1 participant

Read full topic

1 post - 1 participant

Read full topic

I get this error occasionally.

Access to XMLHttpRequest at ‘https://myUrl/cart?param=1’ from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, http://localhost’, but only one is allowed

• This is my delete function
  

How can i solve the problem?

1 post - 1 participant

Read full topic

Hello,

I try different solutions, ion-button, button ion-button, button href, … but nothing work.

In Page html (ion-content)

  <ion-button (click)="openExternalPage()">openExternal</ion-button>
  <ion-button (click)="logEvent($event)">Log</ion-button>
  <ion-button (click)="openExternalPage('google.com')"><ion-label>openExternal Label</ion-label></ion-button>

And in class HomePage

  openExternalPage(url:string): void {
    console.log('go => ' + url);
  }

  logEvent(event) {
    alert('test');
    console.log(event);
  }

Thank you for help

1 post - 1 participant

Read full topic

After upgrading to Ionic 5 cannot resize the slider after passing the breakpoints property into the options. Were there any breaking changes in terms of the ion-slides component options?

slideOptsFour = {

    autoplay: {

      disableOnInteraction: false,

    },

    loop: true,

    slidesPerView: 3,

    breakpoints: {

      // not working

      500: {

        slidesPerView: 2,

      },

    },

  };

2 posts - 1 participant

Read full topic

Hi All - I’m relatively new to Ionic so thanks in advance for helping me out.

My question: is it possible to select the ionic-css for a media query and update it’s value via the domController? In particular, I’m looking for a query that would allow me to update CSS properties present in a @media (prefers-color-theme: dark).

Background on the question:
I’ve created a theme-switcher-service for my Ionic application. This is how it works: every user is associated with an organization, and each organization has a primary / secondary color. The primary / secondary colors drive the variables.scss file with all of the --ion-color-primary, --ion-color-secondary, etc.

The way I accomplish this is as follows:

1. Define a theme object with a themeVariable and a value, i.e. {themeVariable: ‘–ion-color-primary’, value: ‘#ffffff’
2. I use the domController to write the style to the DOM, invoking document.documentElement.style.setProperty(themeVariable, value);

This works perfectly in terms of overriding default colors in the ::root of the variables.scss file. However, I have been having a lot of trouble overriding the default colors when the app is in dark mode.

In particular, for the following media query: (prefers-color-scheme: dark) - I can’t seem to figure out a good way to overwrite the default colors in this media query with the custom colors. If it’s possible, please let me know if there is a way to create a themeVariable object that can target the CSS of media queries.

If you need any other information from me please let me know. Thank you in advance for your help!

1 post - 1 participant

Read full topic

not only for social sharing plugin, there’s other things like select box “Done” language.
how can I change those language translated to my language?

sharescreen750×1334 142 KB

I tried to change it language to Korean on Xcode but it won’t change any.

스크린샷 2020-07-18 오후 4.29.461814×216 45.2 KB

1 post - 1 participant

Read full topic