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

Ionic 3 custom icon + ios 12 display issue

$
0
0

@thiberttravert wrote:

Hi there,

Encountering display issue with custom icon in iOS 12.

I use custom icon like that in app.scss :

ion-icon {
  &[class*="custom-"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
  }

  &[class*="custom-settings"] {
    mask-image: url(../assets/icon/settings.svg);
  }
}

I call my custom icon class like that in my html page :

<ion-icon name="custom-settings" class = "settingsIcon"></ion-icon>

Icon is displayed with border/stroke. Only on ios12. I have spend a lot of times and workaround trying to figure out what is going on. Nothing has fixed this problem.
But I noticed that if i let the default icon-size there is no display issue. When I change the icon size with css class, issue appears…

  .settingsIcon{
    font-size : 32px;
    color : white;
  }

Any help would be much appreciate,
See ya !

Posts: 1

Participants: 1

Read full topic


Free ways to collaborate on a project for students without Appflow

$
0
0

@jefredallan wrote:

We are planning to use Ionic for our final year project. Is there a way we can collaborate in one project for free remotely. I know we can use Appflow but we cannot afford the monthly cost for at least 7 months.

Is it possible to run an ionic project from a github repo ? and then different members of the group that has a github account can access that shared repo?

I’m new with Ionic

Posts: 1

Participants: 1

Read full topic

How to upload google map differently based on the user?

$
0
0

@ioclaudio wrote:

Hi,
I’d like the users of my app with the role1 load the GoogleMap in this way:

https://maps.googleapis.com/maps/api/js?key=<mycode>

while the users with the role2 load the map in this way:

https://maps.googleapis.com/maps/api/js?key=<mycode>&libraries=drawing

In the head of index.html I have:
<script src="https://maps.googleapis.com/maps/api/js?key=<mycode>"></script>

Which is the best way to change the script tag dynamically?
The map is shown after the login phase.

I want to do this because I fear that the call counter of the Google drawing library will increase too much even if the users with role2 do not use the functions of the drawing library.

Any idea?
Thank you very much

cld

Posts: 1

Participants: 1

Read full topic

Dynamic height with footer

$
0
0

@IreneC wrote:

Hi!

I have a modal window whose size is dynamic and it has a scroll. The problem is that I can’t see the footer because the data list fills all the screen. I want to see all the time the footer.

Any idea?

Here is my css code:

.own-modal {
@media (min-height: 320px) {
ion-backdrop {
visibility: visible;
}
}

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;

contain: strict;
.modal-wrapper {
&,
.ion-page,
.ion-page .content,
.ion-page .content .scroll-content {
contain: content;
position: relative;
top: auto;
left: auto;
}
display: flex;
overflow: auto;
flex-direction: column;
max-height: 100%;
opacity: 0;
height: auto;
max-width: 100%;
}
}

The modal window content is very simple. In the content I have label and an ion-list and I have a footer with a div and inside an item with a button.

Posts: 1

Participants: 1

Read full topic

What logger would you suggest to use with Ionic apps

Change color of ion-icon with css in Ionic 4.9

$
0
0

@Alexander0821 wrote:

Greetings.

I’m trying to change the color of the custom icons I’m displaying in my tabs menu.

This is my tabs code:

<ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab-1">
        <ion-icon src="assets/myIcons/icon_1_tab.svg"></ion-icon>
        <ion-label>Tab 1</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="tab-2">
        <ion-icon src="assets/myIcons/icon_2_tab.svg"></ion-icon>
        <ion-label>Tab 2</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

I tried using the custom css properties to change the styling with the properties:

--color-selected: #somecolor;
--color: #somecolor;

(as explained here https://ionicframework.com/docs/api/tab-button and here https://stackoverflow.com/questions/55563619/how-can-i-change-the-color-of-my-icon-when-ion-tab-button-is-active-css-ionic) to no avail.
I must say that the tab background and label colors are correctly updated by those css properties. However, the tab icon remains the same color.

Also, I tried the approach from https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html :

[...]
<ion-tab-button tab="tab-1">
        <ion-icon src="assets/myIcons/icon_1_tab.svg" class="someclass"></ion-icon>
        <ion-label>Tab 1</ion-label>
</ion-tab-button>
[...]
ion-icon {
    &.someclass{
      color:blue;
}

That also didn’t work. Does anyone knows how to do it correctly?

This is my ionic info:

Ionic CLI : 5.2.7
Ionic Framework : @ionic/angular 4.9.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

PWA and http request

$
0
0

@IAmos wrote:

Hi

I’m a newbie to PWA and wanted to make a simple login page.
I created a simple page with email and password inputs and a login button.
Now I want the button to call my backend login API (webservice).

I tried creating a service where the code should go but I got a message:
[ERROR] Sorry! ionic g can only be run in an Ionic project directory.

I looked for some info about it but got lost in the way. Where can I have an article or any other helpful information about adding http requests to a PWA project?

Thanks

Posts: 1

Participants: 1

Read full topic

Ionic 4: HELP: Otp Verification Login Request using a api

$
0
0

@BalajiA wrote:

Need an Otp Verification Login Capacitor app, a user needs to Request the OTP once entered the phone number, I’m done with the UI Design and Capacitor Build on Android & IOS, but I need a code how it works with Restful App. Like a dummy configuration. Using your code help, I would make some more changes if possible. Thanks in advance.

Posts: 1

Participants: 1

Read full topic


Change Ionic 4 CSS and make Full Screen

$
0
0

@hamzadiaz wrote:

I am trying to replicate the following UI layout but can’t get the borders styling, I don’t know if there is a way to accomplish it in Ionic.

This is what I have so far:

I am using the following border-radius: border-radius: 0 0 0 3rem;
I have two issues as incricled in blue can’t get that type of border using css and and make it fullscreen (Already added fullscreen property <ion-content no-padding fullscreen class="…)

Also regarding the bordering after doing dome research I found this stackoverflow: https://stackoverflow.com/questions/22421880/inverted-border-radius-possible but I don’t know if there is an easy way or trick to do the same.

Posts: 1

Participants: 1

Read full topic

ionic serve not working properly How can I fix the error?

$
0
0

@dnayak696 wrote:

I’m a mac user while I am setting JDK environment variable on bash_profile following various blogs & articles I have done a big mistake plz help me to fix it.

Dhirajs-MacBook-Air:spiritualGuru thedkn$ ionic -v Error: EACCES:

permission denied, mkdir
‘/Library/Java/JavaVirtualMachines/jdk-11.0.1.jdk/Contents/Home/.ionic’

at Object.mkdirSync (fs.js:757:3)
at Object.mkdirpSync  (/Users/thedkn/node_modules/@ionic/utils-fs/dist/index.js:125:16)
at Config.set c [as c]  (/Users/thedkn/node_modules/@ionic/cli-framework/lib/config.js:37:20)
at Config.set (/Users/thedkn/node_modules/@ionic/cli-framework/lib/config.js:50:16)
at Object.<anonymous> (/Users/thedkn/node_modules/ionic/dist/index.js:72:29)
at Generator.next (<anonymous>)
at fulfilled (/Users/thedkn/node_modules/tslib/tslib.js:104:62) Dhiraj

Posts: 1

Participants: 1

Read full topic

Can i have 2 filekey attribute in a FileUploadOptions parameter IONIC3?

$
0
0

@Vinayak wrote:

I want to upload 2 image file on the server, but unable to upload 2 image file in a same api. In JSON api there is 2 parameter which requires image file i.e id_proof_file_name and address_proof_name.

Rest Api function

register(imageidproof,imageaddproof, fullname, mobile_no, dob, address,
nominee_name,nominee_no, nominee_add, nominee_dob, scheme_type, installmentpending,
room_id, id_proof_type, id_proof_number, add_proof_type,  add_proof_number): Promise<any> {
    return new Promise((resolve, reject) => {
      let oPtions = {
        fileKey: 'id_proof_file',
        fileKey:'address_proof_file',
        params: {
          "full_name": fullname,
          "mobile_no": mobile_no,
          "dob": dob,
          "address": address,
          "nominee_name": nominee_name,
          "nominee_no": nominee_no,
          "nominee_add": nominee_add,
          "nominee_dob": nominee_dob,
          "scheme_type": scheme_type,
          "installmentpending": installmentpending,
          "room_id": room_id,
          "id_proof_type": id_proof_type,
          "id_proof_number": id_proof_number,
          "add_proof_type": add_proof_type,
          "add_proof_number": add_proof_number,
        },
        chunkedMode: false
      }

      let loading = this.loadCtrl.create({
        spinner: 'crescent',
        content: 'Please wait...',
        duration: 5000
      });
      loading.present();

      let bothimage = [];
      bothimage.push(imageidproof);
      bothimage.push(imageaddproof);

      console.log("POST DATA " + JSON.stringify(oPtions));
      console.log("IMage Data", bothimage.toString());
      const fileTransfer: FileTransferObject = this.transfer.create();

      fileTransfer.upload(bothimage.toString(), URL + 'registration', oPtions, true).then(data => {
        let result = this.helper.parseData(data.response);
        console.log("Response from server", result);
        loading.dismiss();
        this.checkForTokenFailure(result.status);
        if (result.response == "true") {
          resolve(result)
        } else {
          this.helper.showALert(2, result.message);
          resolve();
        }
      }).catch(err => {
        loading.dismiss();
        console.log("Something error happend", err);
        reject();
      })
    })
  }

and in upload function i tried to send the image in the array, but it through error string type is supported in this format.

I want to have 2 fileKey is it possible …?

Posts: 1

Participants: 1

Read full topic

Centering content

$
0
0

@IAmos wrote:

Hi

Am I really that slow in understanding ionic pwa or is it just too tricky?
I just want a simple center alignment for the screen, and I couldn’t find how to do it.
<div align="center> that wraps everything didn’t work.
<div class="center> and .center {display: flex; justify-content: center; } in csss … didn’t work.
I read pwa-center directive might do the trick but it’s not…
What am I missing? Such a simple/basic feature and nothing works for me…

Code sample


<ion-header class="center">        
        <ion-toolbar color="primary">
          <ion-item> <<<I tried class="center" here but nothing...
            <ion-img src="assets/icon/logo.png"/>
            <ion-title>Welcome</ion-title>
          </ion-item>
        </ion-toolbar>        
      </ion-header>,
      
      <ion-content class="center">           
        <ion-input required type="email" placeholder="Enter email"/>                  
        <ion-input required type="password" placeholder="Enter password"/>                  
        <ion-input type="password" placeholder="Confirm password"/> 
        <switch>Remember me</switch>
        <ion-button href="" shape="round" size="default">Login</ion-button>      
      </ion-content>

Posts: 3

Participants: 2

Read full topic

iOS: 221 duplicate symbols for architecture x86_64 clang: error: linker command failed with exit code 1

$
0
0

@basti wrote:

Hi! I updated to the newest Xcode version and my App was building fine so far. But now it doesn’t. I tried two days everything I found, but no way.

The error is:

221 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1

and then
xcodebuild: Command failed with exit code 65

My ionic info:

Ionic:

   Ionic CLI          : 5.4.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 3.1.2, (and 17 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.10.2
   OS         : macOS Mojave
   Xcode      : Xcode 11.1 Build version 11A1027

I also tried
ionic cordova build ios --buildFlag='-UseModernBuildSystem=0'
Setting binaryMode on/off in Xcode
Complete reinstall ionic/cordova
ionic cordova plugin remove cordova-plugin-console is not necessary anymore
It has worked with all the plugins before, so I think that the plugins can’t be the problem.

Can anybody please give me a hint?

Posts: 1

Participants: 1

Read full topic

Ionic v3 ios app crashing on scrolling list

$
0
0

@jigarchheda wrote:

am working with ionic v3 project where i have bulk of data in ion-list like facebook’s feeds which contains images and video, so it works fine in android devices, but in ios it shows memory pressure error and app crashes to root page , anyone can please help on this

i tried removing infinite scroll and tried virtual scroll also

I am building app using xcode and testing on iphone 6 plus software version 12.4.1

thanks,

Following things i tried but still same error 1)I tried using webview. 2)virtual scroll (on using virtual scroll it was working fine when it had only list in ui without any other components in DOM but when i add some static components then it goes out of viewport and UI disappers and appears)

Memory pressure error on scrolling for sometime and app crashes

Posts: 1

Participants: 1

Read full topic

Has been blocked by CORS policy

$
0
0

@jonathanrosso wrote:

I am usinf ionic4 for my application development.
The error bellow is happening in production apk build.

Access to XMLHttpRequest
from origin ‘http://localhost’ has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response.

Can anyone help me?

Posts: 2

Participants: 2

Read full topic


Please what's the different between Ionic Studio and Lab?

Nested routes/pages inside IonTabs? (v4 React)

$
0
0

@benallfree wrote:

I’m having a heck of a time getting nested routes to work inside an IonTabs component. Is this basic structure allowed?

All goes well for a while, but hitting the tab button again to return to the /shop root seems to make the other pages permanently disappear. I suspect there is a bug in IonRouterOutlet because if I remove it (and <IonTabs>) navigation works fine.

<IonApp>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/:tab(shop)" component={Shop} />
              <Route path="/:tab(shop)/:item" component={Item} />
              <Route path="/:tab(shop)/:item/detail" component={Detail} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="shop" href="/shop">
                <IonIcon icon={pricetag} />
                <IonLabel>Shop</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonApp>

Posts: 1

Participants: 1

Read full topic

IonReactRouter: Target page not rendered after history.push()

$
0
0

@shadowbrush wrote:

After upgrading from ionic/react@0.07 to 4.11.0, opening a new page through history.push() does not always render the target page.

I’ll paste my app.tsx below.

It may have to do with React Router’s inclusive routing. It appears navigating from the first route (/:tab(wallet)) to one of the other routes will not render the target page, but the browser continues to show this first route. The address bar does show the new url. When hitting refresh, the new page is shown. And I can navigate to the first route again without problem: the page of this first route will be rendered and replace the previous page.

I tried adding a Switch to get back to exclusive routing, but that didn’t help.

Anyone have a thought on this one? Thanks!

Holger

    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <AppMenu/>
          <IonPage id="main">
            <IonTabs>
              <IonRouterOutlet>
                <Route exact path="/:tab(wallet)" component={PurchasesPage}/>
                <Route exact path="/:tab(wallet)/card/:id" component={PurchasePage}/>
                <Route exact path="/:tab(wallet)/brands/:pageMode" component={VendorsPage}/>
                <Route exact path="/:tab(wallet)/buy-card/:vendorId" component={NewPurchasePage}/>
                <Route exact path="/:tab(wallet)/add-card/:vendorId" component={NewUploadedPurchasePage}/>
                <Route exact path="/:tab(wallet)/new-transfer/:id" component={NewPurchaseTransferPage}/>
                <Route exact path="/:tab(wallet)/barcode/:id" component={BarcodePage}/>
                <Route exact path="/:tab(account)" component={UserAccountPage}/>
                <Route exact path="/about" component={AboutPage}/>
                <Route exact path="/sign-in" component={SignInPage}/>
                {/*<Route exact path="/" render={(): ReactElement<any> => <Redirect to="/wallet"/>}/>*/}
              </IonRouterOutlet>
              <IonTabBar slot="bottom">
                <IonTabButton tab="wallet" href="/wallet">
                  <IonIcon icon={wallet}/>
                  <IonLabel>Wallet</IonLabel>
                </IonTabButton>
                <IonTabButton tab="account" href="/account">
                  <IonIcon icon={settings}/>
                  <IonLabel>Account</IonLabel>
                </IonTabButton>
              </IonTabBar>
            </IonTabs>
          </IonPage>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

Posts: 1

Participants: 1

Read full topic

ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs

$
0
0

@lalitkumarbaghel wrote:

I got this mail each submission

Dear Developer,

We identified one or more issues with a recent delivery for your app, “ABCD” 1.0 (1.14). Your delivery was successful, but you may wish to correct the following issues in your next delivery:

ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs . See http://www.expertsuggestion.com/2019/09/app-store-connect-itms-90809-deprecated.html for more information.

After you???ve corrected the issues, you can use Xcode or Application Loader to upload a new binary to App Store Connect.

Best regards,

The App Store Team

I read your post 100 times you talking about update all version i updated.but when i search after build the keyword UIWEBVIew its founded never gone. i also console in my app its using wkwebview but why apple sending this warning mail.

in the end of post you talking about capacitor . I added in my project and follow all instruction synch my project then making build from android studio for android and x code for ios.then after i submit app again then i got this mail again what happend to ionic team ?

please help i never saw ionic team ,flutter tem,react native team never responding we are developer facing because our app in appstore and i never wanna lose our clients

Posts: 1

Participants: 1

Read full topic

From Login page to tabs page

$
0
0

@srterry wrote:

I’m trying to create my first app with Ionic Framework and I’m stuck. I want to have a login page before my tabs pages that is my main screeens on my app and, I’m getting always same error of URL.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [

{ 
     path: '', 
     loadChildren: './login/login.module#LoginPageModule' 
},

{
     path: 'tabs',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
}

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

tabs.router.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { TabsPage } from ‘./tabs.page’;

const routes: Routes = [
{
path: ‘tabs’,
component: TabsPage,
children: [
{
path: ‘tab1’,
children: [
{
path: ‘’,
loadChildren: () =>
import(’…/tab1/tab1.module’).then(m => m.Tab1PageModule)
}
]
},
{
path: ‘tab2’,
children: [
{
path: ‘’,
loadChildren: () =>
import(’…/tab2/tab2.module’).then(m => m.Tab2PageModule)
}
]
},
{
path: ‘tab3’,
children: [
{
path: ‘’,
loadChildren: () =>
import(’…/tab3/tab3.module’).then(m => m.Tab3PageModule)
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/tab1’,
pathMatch: ‘full’
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}

login.page.ts
import { Component, OnInit } from ‘@angular/core’;
import { Router } from ‘@angular/router’;

@Component({
selector: ‘app-login’,
templateUrl: ‘./login.page.html’,
styleUrls: [’./login.page.scss’],
})
export class LoginPage implements OnInit {

constructor(public router: Router) { }

ngOnInit() {
}

toTabs(){
this.router.navigateByUrl(’/tabs’);
}

}

login.page.html


Login

To Tabs

I’ve tryed to navigate to ‘/tabs’, to ‘/tabs/tab1’ and to ‘tabs’ and I desperated. If anyone could help me I would be very grateful.

Posts: 1

Participants: 1

Read full topic

Viewing all 71072 articles
Browse latest View live


Latest Images

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