@FangerZero wrote:

Hello, I’m new to ionic and slowly learning. Below is some code I have and the ion-button does not work. But if I take out ion-tabs, it works fine.

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item >
          <ion-label position="floating">E-mail</ion-label>
          <ion-input></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
        <ion-button color="primary" expand="block" fill="clear" [routerLink]="['/', 'registration']">Register</ion-button>
        <ion-button color="primary" expand="block" >Login</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button [routerLink]="['/', 'games']">
        <ion-icon name="american-football"></ion-icon>
        <ion-label>Games</ion-label>
        <ion-badge></ion-badge>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'teams']">
        <ion-icon name="school"></ion-icon>
        <ion-label>Teams</ion-label>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'ranks']">
        <ion-icon name="ribbon"></ion-icon>
        <ion-label>Ranks</ion-label>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'login']">
        <ion-icon name="log-in"></ion-icon>
        <ion-label>Login</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

Posts: 1

Participants: 1

Read full topic

@bpeary wrote:

General question: I have a client that wants to make a web app and maybe later iOS and Android apps. I am recommending Ionic, but a developer working with them is saying that if they use Ionic there will be bloat related to iOS and Android apps, that would not be there if they make a React web app. I believe this not to be true, but I need to give some proof to back it up. Can anyone give me some direction on this?

Also, just for my confirmation, do you think that as just a web app alone, Ionic is just as good as any other alternative out there like React or Vue.

One other thing, I’ve looked into alternatives, but if you had to make web apps that might someday become iOS and Android apps if the web app was popular, besides Ionic, what would you use? Is there anything? I believe Ionic to be the best for this use case, but I need to convince others, so knowledge on why potential competitors would not be good would be helpful.

Any help would be appreciated thanks.

Cheers,

Brett

Posts: 1

Participants: 1

Read full topic

@bpeary wrote:

Hi, working with a React developer and trying to convince him to use Ionic as our web app may be made into iOS and Android app later.

I, personally, would like to work with React in Ionic and I think that I could convince him to use Ionic if we could use React. What do you think of the current state of Ionic’s React project? Do you think it is good enough to do a production level web-only app?

Cheers,

Brett

Posts: 1

Participants: 1

Read full topic

@bpeary wrote:

Making a web-only app where users will share files to a limited number of people. What options are out there for backends? What is the best option? Any other guidance you can provide would be appreciated.

Cheers,

Brett

Posts: 1

Participants: 1

Read full topic

@grelements wrote:

Hi, I’ve got a working app - runs fine locally via ionic serve and also tested with android virtual device. I’m trying to build it in AppFlow. However, error occurs as follows…

ERROR in Could not resolve module ./profile/profile.module relative to app/app-routing.module.ts

My app-routing,module.ts as follows…

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import {AuthGuard} from "./core/auth.guard";

const routes: Routes = [
  // { path: '', redirectTo: 'tabs', pathMatch: 'full' },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule',
    canActivate: [AuthGuard]
  },
  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
  { path: 'work', loadChildren: './work/work.module#WorkPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'signup', loadChildren: './login/signup/signup.module#SignupPageModule' },
  { path: 'forgot-password', loadChildren: './login/forgot-password/forgot-password.module#ForgotPasswordPageModule' },
  { path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
  { path: 'work/other-work', loadChildren: './work/other-work/other-work.module#OtherWorkPageModule' },
  { path: 'notification/:id', loadChildren: './notification/notification-details/notification-details.module#NotificationDetailsPageModule' },
  //{ path: 'profile/leave-manager', loadChildren: './profile/leave-manager/leave-manager.module#LeaveManagerPageModule' },

];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

It’s probably a simple thing but if anyone can direct me, it’ll be much appreciated.

Posts: 1

Participants: 1

Read full topic

@ippei wrote:

We’ve updated our Live Deploy integration from v4 to v5 API:

• before: cordova-plugin-ionic@4.1.7, @ionic/pro@1.0.20, cordova-plugin-ionic-webview@1.1.16
• after: cordova-plugin-ionic@5.3.0, @ionic/pro@2.0.4, cordova-plugin-ionic-webview@2.4.1

Our own update dialog is implemented with UPDATE_METHOD=none. WIth v4, we had a button to reset deployed version to originally shipped (deletes every update) for debugging purpose, but struggling to implement it with v5. Anyone know how we can achieve such functionality with v5 API? Any help would be greatly appreciated.

With v4, our reset feature does following:

1. for each version in getVersions(), run deleteVersion(version)
2. window.location.reload()

Posts: 1

Participants: 1

Read full topic

@vartmaa01 wrote:

Planters

Our earth is depriving of greenery and we wait for holidays to go to some green place and get fresh air as the air in towns is highly polluted. We have expensive yet useless air purifiers in the market that are good for nothing as they are rotating the same air. When it’s hard to get fresh air in the parks or gardens where we see several people spreading infections by coughing, sneezing etc. Vartmaa has come up with beautiful, graceful and elegant solution; Steel Planters. These planter are so amazing that anyone would like to keep them for indoor plantation as well as outdoor plantation. These elegant planners are unbreakable as Vartmaa Impex offers exclusive quality products.
These serene planters are adorable and a delight to see along with the added advantage of oxygen level its plants will increase, it’s durability and flexibility of moving them from one place to other without any breakage. Vartmaa Impex designs state of art pieces just for your gorgeous homes.

Our Company Vartmaa Impex Pvt. Limited is manufacturing and exporting a wide range of Bar Cart. We manufacture this products with advanced raw steels sourced from leading mines around the world. These are mostly preferred in constructing bar cart.
And we also manufacturer & exporters of more Steel customized products like Stainless Steel Table, Candle Holders, Stainless Steel Benches, Steel Gate, Steel Railing, Planters, Lamps, Lanterns,Display Stands.bar cart

Posts: 1

Participants: 1

Read full topic

@tiagosilveira wrote:

Hello Everyone I’m desperated, my client asks me for a new input style as the google style I’m almos there, but I’m with a big problem on the overflow as you can see:

NgRLv.gif358×637 177 KB

All the colors are changing correctly, but the label is being cutted in the middle. Can anyone help me please? I’ve tryed to use overflow: visible; padding-top, margin and nothing

Thats My SCSS:

* {
  --background-focused: transparent;
}
ion-toolbar {
  --background: #3880ff !important;
  --color: #fff !important;
}

#menu_header {
  --background: #3880ff !important;
  --color: #fff !important;
}
#avatar_menu {
  margin-right: 10px !important;
}

.item-input {
  margin-top: 5px;
  &.invalid {
    color: red;
  }
}

ion-label.google-label {
  color: #fff;
  background-color: #3880ff;
  font-size: 12px;
  margin-left: 10px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  position: absolute !important;
  margin-bottom: 5px !important;
  z-index: 9;
}

ion-input.google-input {
  padding-top: 10px !important;
  color: white;
  border: 2px solid white;
  width: 100%;
  max-width: 100%;
  padding-left: 10px !important;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.item-label-floating {
  &.ion-invalid.ion-touched {
    .google-label {
      color: #f53d3d !important;
    }
    .google-input {
      border: 2px solid #f53d3d !important;
    }
  }
  &.item-has-value {
    .google-label {
      padding-left: 4px !important;
      padding-right: 4px !important;
      color: #062f77 !important;
      -webkit-transform: translate3d(0, -50%, 0) !important;
      transform: translate3d(0, -50%, 0) !important;
      -webkit-transform-origin: left top;
      transform-origin: left top;
      -webkit-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      &.invalid {
        .google-label {
          color: #f53d3d !important;
        }
        .google-input {
          border: 2px solid #f53d3d !important;
        }
      }
    }

    &.ion-valid.ion-touched {
      .google-label {
        color: #fff !important;
      }
    }
  }
  &.item-has-focus {
    .google-label {
      padding-left: 4px !important;
      padding-right: 4px !important;
      color: #062f77 !important;
      -webkit-transform: translate3d(0, -50%, 0) !important;
      transform: translate3d(0, -50%, 0) !important;
      -webkit-transform-origin: left top;
      transform-origin: left top;
      -webkit-transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .google-input {
      border: 2px solid #062f77;
    }
    &.invalid {
      .google-label {
        color: #f53d3d !important;
      }
      .google-input {
        border: 2px solid #f53d3d !important;
      }
    }

    &.ion-valid.ion-touched {
      .google-label {
        color: #062f77 !important;
      }
    }
  }
}

        <ion-item lines="none" [class.invalid]="showErrors('email')">
          <ion-label class="google-label" position="floating">
            E-Mail
          </ion-label>
          <ion-input formControlName="email" class="google-input" type="text">
          </ion-input>
        </ion-item>

Posts: 2

Participants: 1

Read full topic

@developergeme wrote:

I have an App using lazy loading, and is running the app in a browser, so when a user enters the url for my site he is navigated to

/index.html#/home

if the user now changes the url to a url like

/index.html#/

he will get an error like

console.js:35 ERROR Error: Uncaught (in promise): invalid views to insert
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:223)
at NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263

in the console

How can I verify that the url exist before letting the nav-controller throw this error.

In Sentry, where I record all errors it looks like this

image.png836×335 19.3 KB

I think this happens when the user double clicks on the back navigation arrow, but haven’t been able to verify

Posts: 1

Participants: 1

Read full topic

@Andrea1991 wrote:

I have created ionic 4 new project using following command.

ionic start myApp tabs

Install angular

ng add @angular/pwa --project app

And build app

ionic build --prod

at 92%(92% chunk asset optimization TerserPlugin) it doesn’t work, stop here and and gives attached error!

Can somone adivse?

Cattura.PNG1116×588 66.3 KB

Posts: 1

Participants: 1

Read full topic

@jdeoworld wrote:

In a form I want to delete " item line" with ion-item-sliding. If I don’t use ion-item-sliding, I can delete the item line correctly, the form works correctly. When I use the ion-item-sliding, the delete button doesn’t work any more. I think because of the ion-input. It looks the ion-input get over the ion-item-option so the click doesn’t work.

Let me show you like this you will understand:

There is the template code:

<!-- Show and write Quantity -->
<div formArrayName="quantity">
    <ion-item-sliding *ngFor="let quantityCtrl of itemsCtrl.get('quantity').controls; let qtyIndex = index">
        <ion-item>
            <ion-input type="text" placeholder="Add a quantity ..." [formControlName]="qtyIndex"></ion-input>

            <!-- QUANTITY remove Button -->
            <ion-item-options side="start">
                <ion-item-option color="danger" expandable (click)="removeItem(itemsCtrl, qtyIndex)">
                    <ion-icon slot="icon-only" name="remove-circle-outline"></ion-icon>
                </ion-item-option>
            </ion-item-options>
        </ion-item>
        <br>
    </ion-item-sliding>

Thank you very much for your help

Posts: 1

Participants: 1

Read full topic

@evripides wrote:

Hello

Any one has full tutorial for in app purchases 2 step by step

REgads
Evripides

Posts: 1

Participants: 1

Read full topic

@godara wrote:

Have made a mobile application using ionic 4 which is working fine in android build.
But when I build using xcode and see the functionality in simulator (IOS 10.1) , horizontal scroll which has been added to a div , does not work. Please suggest a solution.

Posts: 1

Participants: 1

Read full topic

@suchigg wrote:

I’m trying to update my ionic cli version to the latest avaiable (5.2.1) but i have some issue that i don’t understand.

That’s what i did:

npm uninstal -g ionic
npm instal -g ionic@5.2.1

the output is:

• ionic@5.2.1
  added 224 packages from 167 contributors in 34.544s

However if i run

ionic -v

The output is:

_ _
() ___ _ __ () ___
| |/ _ | '_ | |/ |
| | (_) | | | | | (
||___/|| |||___| CLI 4.12.0

What’s wrong with those steps?

Posts: 1

Participants: 1

Read full topic

@dargod wrote:

Hello everyone,

I just started using Ionic and so far it goes well especially once debugging through VSC works.

There is only one problem I can’t solve.

By default when debugging app is served on port 8080. I need to change it to specific port. From terminal I use

ionic serve -p 4200

But how to setup this for debugging? In launch.json adding port parameter in configuration doesn’t help.

Thanks in advance

Posts: 1

Participants: 1

Read full topic

@Nsimoncini wrote:

Hi, i was trying to mix virtual-scroll and row/col to make the items responsive depending on screen size and I thought ion-col would be perfect. I tried with this:

<ion-virtual-scroll [items]="apples" approxItemHeight="500px">
    <ion-card *virtualItem="let m">
      <div>
        <ion-img class="front_img" src="assets/imgs/apples/{{m.img}}" ></ion-img>
      </div>
      <ion-card-title>
        <ion-text color="primary">
          <h1>{{m.name}}</h1>
        </ion-text>
      </ion-card-title>
      <ion-card-content class="description">
        <span > {{ m.desc[lang] }}</span> <br>

      </ion-card-content>
      <ion-card-content class="show-more">
        <u (click)="goTo(m.id)"> .. {{ 'OPTION.more' | translate }}</u>
      </ion-card-content>
    </ion-card>
  </ion-virtual-scroll>

But i’m facing 2 issues:

1. I don’t know the exact height of every card so I can’t put a value in approxHeight which cause empty spaces or overlay of cards in my app. Is there any workaround? (only thing I can think of is cap the height at N px and set overflow to hidden).

2. I can’t make sizeXl="6" sizeLg="6" sizeMd="6" sizeSm="6" sizeXs="12" work for ion-col because the app is just ignoring them, the cols will be on different rows no matter what…

Have anyone else faced this (or these) issue/s ??

Thanks!

Posts: 1

Participants: 1

Read full topic

@salomon022 wrote:

How to give start time and end time?

eventSource = [
  {
    title: 'Event - ',
    startTime:'',
    endTime:  '',
    color: 'primary'
  }];

Posts: 1

Participants: 1

Read full topic

@AJDCNumenti wrote:

Hi.
How i can change de ios-header background color?

Posts: 1

Participants: 1

Read full topic

@PrasenjitKhardaha wrote:

When I try to making a side menu on another page then navigation not working properly…

let there are two menu overview and details in side menu. when load first time then overview page is loaded then go to details page then again try to go overview page then not to go that page

Posts: 1

Participants: 1

Read full topic

@krupa_rk wrote:

Hi,
Actually in ionic 4 input fields like ion-input / ion-text area maxlength attribute does not working in device but it was working in browser view. . please help to find out the issue.

Here is my code :

<ion-textarea type=“text” maxlength=“256” style=“border: 1px solid;”
(ngModelChange)=“Change($event)” [(ngModel)]=“text”>

Thanks

Posts: 1

Participants: 1

Read full topic