Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 48984 articles
Browse latest View live

Ionic Storage Categorys

$
0
0

@nature225 wrote:

Is it possible to give different categorys in storage? For Example i have 4 categorys:

dvd, blueray, cd, game?

Can i save data for each category for example:

this.storage.set(“todos”, todos, “category”);

Posts: 1

Participants: 1

Read full topic


Ionic 4 Changing Image Fill Color

$
0
0

@AmberS wrote:

I am new to Ionic 4 and am trying to figure out the properties for <ion img> . I am simply trying to change the image fill color of a svg file to white. Any help will be appreciated. Below is what I have tried to do; however I have had no luck.

Home page code:

<ion-content padding>
  <ion-grid>
  <ion-row class  = "row1">
    <ion-img src = "/assets/icon/safety.svg"></ion-img>
  </ion-row>
 </ion-grid>
</ion-content>

Trying to change image color:

.row1{
    ion-img{
        fill: white;
    }
}

Posts: 1

Participants: 1

Read full topic

Migration Ionic3

$
0
0

@sioessi wrote:

I’m playing with the Ionic 4 beta and following the steps in the document, as a first step, try to load the css of my application, add it to the global.scss file and add my variables to the theme/variables.scss file, however, I get the error that the variable is not defined.

Also, create a new project like this:

ionic start myApp blank --type=angular

And when wanting to run the command ionic serve, ionic generate I receive the error

Cannot perform Ionic serve/watch for project type: angular.

Posts: 1

Participants: 1

Read full topic

Alert Controller with Input Button

$
0
0

@nature225 wrote:

Hey everyone

Is it possible to create an alert Controller with Input Field and Button into Inputfield? For Exempel camera Icon and if this Click Open Camera??

Posts: 1

Participants: 1

Read full topic

Ionic 4 Expandable Accordion

$
0
0

@Morgs009 wrote:

Please help me, all I want to do is create a simple accordion in ionic 4. Everytime I create something in a ion-list everything is in one line can someone help if I am missing something?
My html:

<ion-list class="product-types">

    <ion-list-header>
      <ion-label>Choose a Product Category</ion-label>
    </ion-list-header>

    <ion-item (click)="ExpandItem(p.Id)" *ngFor="let p of ProductTypes" margin-bottom>

      <ion-thumbnail start>
          <img [src]="this.auth.APIUrl + '' + p.LogoUrl" />
      </ion-thumbnail>

      <h2>My Neighbor Totoro</h2>
      <p>Hayao Miyazaki • 1988</p>

      <div id="expandWrapper" class="expand-wrapper" [class.collapsed]="!p.Expanded">
          Hello people
      </div>

      <ion-button clear end>View</ion-button>

    </ion-item>

  </ion-list>

Everything goes on one line like this:

All the examples I’ve followed online have similar html layout but their lists look different from my ugly ugly one… Please help me… I’ve also noticed that even if I’ve set my .expand-wrapper div to height: 0; as you can see the content is visible either way! Check my css:

.expand-wrapper {
  height: 0;
  transition: 0.2s linear;
}  

.collapsed {
  height: 0 !important;
}

Posts: 1

Participants: 1

Read full topic

[Ionic 4 - Vue] Modal - Get props inside component

$
0
0

@siqueira_pauloh wrote:

Hi,
I’m using ionic-vue and building a modal, I need to pass some props to the component, so I tried this:

 this.$ionic.modalController
        .create({
          component: ModalSelectSearch,
           componentProps: { title: "Teste" }          
        })
        .then(m => m.present());

But I can’t get the props in my component, i tried like that:

export default {
  name: "ModalSelectSearch",
  props: ['title'],

But it didn’t work.
How can I get the props passed using componentProps in my component?

Thanks.

Posts: 1

Participants: 1

Read full topic

POST method in iOS is not Working

$
0
0

@Nirmalya-S wrote:

I have a app which in running well in Android. But when I try to run the app in iOS, all the GET method is working properly but the POST method stuck in a preflight issue.

I’m using --------- import { Http} from “@angular/http” and my post method looks like
return new Promise((resolve, reject) => {
this.http.post(‘https://myURL.com/api/postMethod’, “{data: data}”)
.subscribe(data => {
resolve(data.json());
}, (err) => {
reject(err);
});
});

I have also tried with import { HTTP } from ‘@ionic-native/http’; but failed. I have also added the param name=“ios-package” value=“CDVWKWebViewEngine”/> in Config.xml but nothing works for me.

Could anyone please help me on this??

Posts: 3

Participants: 2

Read full topic

How to close iphone default keyboard using ionic3 while it is opening in iframe?

$
0
0

@ysthehurricane wrote:

i have put my payment gateway inside the iframe and its perfectly worked but whenever i click on the input field for entering card number the default iphone keyboard is opened but it never close by tapping on screen or go to back page.

i have searched lot of things and try some solutions which i found on google but still i can not get any solution.

this.pay= this.navParams.get(“payment”);
this.browser = this.sanitizer.bypassSecurityTrustResourceUrl(this.pay);


Posts: 3

Participants: 2

Read full topic


Ionic 4 PWA scrollbar issue

$
0
0

@juny58 wrote:

Hi, I am not hopeful to be replied though don’t know why I have never been answered. Still, if anyone reads, specially from the ionic team, I think scrollbar control is a must for PWA. The scrollbar looks awful and it is inside the Shadow. Please provide option on how to go about it. It is impossible to take this scrollbar to production. The overall documentation will be improved soon I hope.

Posts: 1

Participants: 1

Read full topic

One signal plugin gives error @ionic-native/onesignal/index.d.ts, found version 4, expected 3

$
0
0

@akhilesh7564 wrote:

hi when i create production release build of ios (ionic cordova build ios --prod --release)its give me error of

@ionic-native/onesignal/index.d.ts, found version 4, expected 3

in production release its give error so i want to know how i solve this issue. its urgent for me

Posts: 1

Participants: 1

Read full topic

Ionic 4 - Build for browser

$
0
0

@samrish wrote:

I want to run the app on a web server ( static files hosting ) and having a problem.

Assume the app runs with domain www.example.com and inside it routes to different pages let’s say example.com/products, the issue if the user refreshes the browser then it would fail to load because the web server would try to open the folder ‘products’ in the root directory.

Command to build:
ionic cordova build browser

@ionic/angular": "^4.0.0-rc.0

thanks

Posts: 1

Participants: 1

Read full topic

Typecript error when buildin app with --prod

App crashes when i include cordova-plugin-accountkit plugin in my app but samething works in blank app

$
0
0

@rameshkondur wrote:

ionic cordova plugin add cordova-plugin-accountkit --save
–variable APP_ID=“767XXXXXXX58358”
–variable APP_NAME=“CodeSundxxxxx”
–variable CLIENT_TOKEN=“6d97e93101b1681dfcb868xxxxxxx”
–variable API_VERSION=“v1.1”

Posts: 1

Participants: 1

Read full topic

Ionic select popup change width

$
0
0

@gaiapuffo wrote:

Hi, I have a ionic 4 application and I have to use select component in a browser, the guide

that is not correct!!!

ion-select-option is correct

ion-option don’t exist in ionic 4 and this is a big mistake in the documentation in this moment.

My problem is that in a browser the popup of the select is very small and I see only a part of the text.!

Why the text not going on new line?

Posts: 1

Participants: 1

Read full topic

Problem with proxy and ionic 4

$
0
0

@muuvmuuv wrote:

Hey I have started using ionic with version 4 beta and came up with a CROS issue where I want to access another API as my local one (where I have access to). So I read this article: https://ionicframework.com/docs/appflow/devapp/#cors and https://ionicframework.com/docs/cli/configuring.html#service-proxies. So after reading those I added this to my ionic.config.json:

  "proxies": [
    {
      "path": "/igdb",
      "proxyUrl": "https://api-v3.igdb.com"
    }
  ]

and then I modified my http post like this:

    this.http
      .post(
        'localhost:8100/igdb/search/',
        `search "${event.detail.value}"; fields game; limit 8;`,
        {
          headers: {
            'user-key': 'xxxxxxxxxxxxxx'
          }
        }
      )
      .subscribe(
        (response: any) => {
          console.log(response);
        },
        (error: any) => {
          console.log('(GamesSearchModal.searchGame) => ERROR:', error);
        }
      );

but this does not work. I get a message: "Http failure response for (unknown url): 0 Unknown Error" I know ionic 4 is in beta but is there something that is not yet added to the v4 docs that I have missed?

Posts: 1

Participants: 1

Read full topic


When open youtube link in inAppBrowser(_blank) it is muted by default, can I change it to be unmuted by default?

$
0
0

@DijanaPavlovic wrote:

when open youtube link in inAppBrowser(_blank) it is muted by default, can I change it to be unmuted by default? Now it is muted and a user can click unmute button to unmute it.

Posts: 1

Participants: 1

Read full topic

Unable to create project in ionic3?

$
0
0

@RomnEmpire wrote:

Hello to all,
I have created fresh project in ionic3 with below cmd ;-
Sudo ionic start AMS tutorial
And i have got multiple errors tell me anyone how to resolve this?

RROR] An error occurred while running npm install (exit code 1):

    npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on

    reading Browserslist >3.0 config used in other tools.

    

    > fsevents@1.2.4 install /Users/admin/Desktop/AMS/node_modules/fsevents

    > node install

    

    [fsevents] Success:

    "/Users/admin/Desktop/AMS/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node"

    already installed

    Pass --update-binary to reinstall or --build-from-source to recompile

    

    > node-sass@4.5.3 install

    /Users/admin/Desktop/AMS/node_modules/node-sass

    > node scripts/install.js

    

    Unable to save binary

    /Users/admin/Desktop/AMS/node_modules/node-sass/vendor/darwin-x64-57 : {

    Error: EACCES: permission denied, mkdir

    '/Users/admin/Desktop/AMS/node_modules/node-sass/vendor'

    at Object.fs.mkdirSync (fs.js:885:18)

    at sync (/Users/admin/Desktop/AMS/node_modules/mkdirp/index.js:71:13)

    at Function.sync

    (/Users/admin/Desktop/AMS/node_modules/mkdirp/index.js:77:24)

    at checkAndDownloadBinary

    (/Users/admin/Desktop/AMS/node_modules/node-sass/scripts/install.js:111:11)

    at Object.<anonymous>

    (/Users/admin/Desktop/AMS/node_modules/node-sass/scripts/install.js:154:1)

    at Module._compile (module.js:653:30)

    at Object.Module._extensions..js (module.js:664:10)

    at Module.load (module.js:566:32)

    at tryModuleLoad (module.js:506:12)

    at Function.Module._load (module.js:498:3)

    errno: -13,

    code: 'EACCES',

    syscall: 'mkdir',

    path: '/Users/admin/Desktop/AMS/node_modules/node-sass/vendor' }

    

    > uglifyjs-webpack-plugin@0.4.6 postinstall

    /Users/admin/Desktop/AMS/node_modules/uglifyjs-webpack-plugin

    > node lib/post_install.js

    

    

    > node-sass@4.5.3 postinstall

    /Users/admin/Desktop/AMS/node_modules/node-sass

    > node scripts/build.js

    

    Building: /usr/local/bin/node

    /Users/admin/Desktop/AMS/node_modules/node-gyp/bin/node-gyp.js rebuild

    --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags=

    --libsass_library=

    gyp info it worked if it ends with ok

    gyp verb cli [ '/usr/local/bin/node',

    gyp verb cli

    '/Users/admin/Desktop/AMS/node_modules/node-gyp/bin/node-gyp.js',

    gyp verb cli   'rebuild',

    gyp verb cli   '--verbose',

    gyp verb cli   '--libsass_ext=',

    gyp verb cli   '--libsass_cflags=',

    gyp verb cli   '--libsass_ldflags=',

    gyp verb cli   '--libsass_library=' ]

    gyp info using node-gyp@3.8.0

    gyp info using node@8.12.0 | darwin | x64

    gyp verb command rebuild []

    gyp verb command clean []

    gyp verb clean removing "build" directory

    gyp verb command configure []

    gyp verb check python checking for Python executable "python2" in the

    PATH

    gyp verb `which` failed Error: not found: python2

    gyp verb `which` failed     at getNotFoundError

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:13:12)

    gyp verb `which` failed     at F

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:68:19)

    gyp verb `which` failed     at E

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:80:29)

    gyp verb `which` failed     at

    /Users/admin/Desktop/AMS/node_modules/which/which.js:89:16

    gyp verb `which` failed     at

    /Users/admin/Desktop/AMS/node_modules/isexe/index.js:42:5

    gyp verb `which` failed     at

    /Users/admin/Desktop/AMS/node_modules/isexe/mode.js:8:5

    gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21)

    gyp verb `which` failed  python2 { Error: not found: python2

    gyp verb `which` failed     at getNotFoundError

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:13:12)

    gyp verb `which` failed     at F

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:68:19)

    gyp verb `which` failed     at E

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:80:29)

    gyp verb `which` failed     at

    /Users/admin/Desktop/AMS/node_modules/which/which.js:89:16

    gyp verb `which` failed     at

    /Users/admin/Desktop/AMS/node_modules/isexe/index.js:42:5

    gyp verb `which` failed     at

    /Users/admin/Desktop/AMS/node_modules/isexe/mode.js:8:5

    gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21)

    gyp verb `which` failed   stack: 'Error: not found: python2\n    at

    getNotFoundError

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:13:12)\n    at F

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:68:19)\n    at E

    (/Users/admin/Desktop/AMS/node_modules/which/which.js:80:29)\n    at

    /Users/admin/Desktop/AMS/node_modules/which/which.js:89:16\n    at

    /Users/admin/Desktop/AMS/node_modules/isexe/index.js:42:5\n    at

    /Users/admin/Desktop/AMS/node_modules/isexe/mode.js:8:5\n    at

    FSReqWrap.oncomplete (fs.js:152:21)',

    gyp verb `which` failed   code: 'ENOENT' }

    gyp verb check python checking for Python executable "python" in the

    PATH

    gyp verb `which` succeeded python /usr/bin/python

    gyp verb check python version `/usr/bin/python -c "import sys; print

    "2.7.10

    gyp verb check python version .%s.%s" % sys.version_info[:3];"`

    returned: %j

    gyp verb get node dir no --target version specified, falling back to

    host node version: 8.12.0

    gyp verb command install [ '8.12.0' ]

    gyp verb install input version string "8.12.0"

    gyp verb install installing version: 8.12.0

    gyp verb install --ensure was passed, so won't reinstall if already

    installed

    gyp verb install version is already installed, need to check

    "installVersion"

    gyp verb got "installVersion" 9

    gyp verb needs "installVersion" 9

    gyp verb install version is good

    gyp verb get node dir target node version installed: 8.12.0

    gyp verb build dir attempting to create "build" dir:

    /Users/admin/Desktop/AMS/node_modules/node-sass/build

    gyp ERR! configure error

    gyp ERR! stack Error: EACCES: permission denied, mkdir

    '/Users/admin/Desktop/AMS/node_modules/node-sass/build'

    gyp ERR! System Darwin 16.7.0

    gyp ERR! command "/usr/local/bin/node"

    "/Users/admin/Desktop/AMS/node_modules/node-gyp/bin/node-gyp.js"

    "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags="

    "--libsass_ldflags=" "--libsass_library="

    gyp ERR! cwd /Users/admin/Desktop/AMS/node_modules/node-sass

    gyp ERR! node -v v8.12.0

    gyp ERR! node-gyp -v v3.8.0

    gyp ERR! not ok

    Build failed with error code: 1

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! node-sass@4.5.3 postinstall: `node scripts/build.js`

    npm ERR! Exit status 1

    npm ERR!

    npm ERR! Failed at the node-sass@4.5.3 postinstall script.

    npm ERR! This is probably not a problem with npm. There is likely

    additional logging output above.

    

    npm ERR! A complete log of this run can be found in:

    npm ERR!     /Users/admin/.npm/_logs/2018-12-28T13_41_29_841Z-debug.log

Posts: 1

Participants: 1

Read full topic

Ionic 4 css var

$
0
0

@sioessi wrote:

Within my variables.scss file I have:

:root {
  --ion-color-primary: #00A9E0;
  --ion-color-secondary: #5BC500;
  --ion-color-danger: #f53d3d;
  --ion-color-light: #f4f4f4;
  --ion-color-dark: #222222;
  --ion-color-gray: #8B8B8B;
  --primaryContrast: darken(#00A9E0, 10%);
  --lightContrast: darken(#f4f4f4, 10%);
  --darkHighlight: lighten(#222, 10%);
  --grayHighlight: lighten(#8B8B8B, 10%);
  --grayContrast: darken(#8B8B8B, 10%);
  --secondaryContrast: darken(#5BC500, 10%);
  --card-ios-border-radius: 8px;
  --card-ios-box-shadow: $box-shadow;
  --card-ios-header-color: var(--ion-color-light);
  --card-ios-header-font-weight: bold; 
  --background-color: var(--ion-color-light);
  --toolbar-background: var(--ion-color-primary);
  --button-round-border-radius: 10px !important;
  --loading-ios-spinner-color: var(--primaryContrast);
  --loading-ios-text-color: var(--primaryContrast);
  --border-radius: 10px;
  --box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
  --padding: 16px; 
}

And within my global.scss file I have:

h1, h2, h3, h4, h5, h6 {
    color: var(--primaryContrast);
    font-weight: bold;
}

However, this does not work, it does not load the value, nor the sources that I have configured

@font-face {
    font-family: 'Test';
    src: url('assets/fonts/test/Regular/test-Regular.eot') format('embedded-opentype'),
        url('assets/fonts/test/Regular/test-Regular.svg') format('svg'),
        url('assets/fonts/test/Regular/test-Regular.ttf') format('truetype'),
        url('assets/fonts/test/Regular/test-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}

Posts: 1

Participants: 1

Read full topic

Ionic barcode sanner post reult

$
0
0

@aminata wrote:

Hi,
I create a small application that scans a qr code and sends the result of the qr code by post to an API.
There I managed to create the scanner of the qr code and I created I can post values on an API with ionic purpose I can’t send the result of the scanner.
Can anyone help me!

import { Component} from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera } from '@ionic-native/camera';
import { BarcodeScanner, BarcodeScannerOptions} from '@ionic-native/barcode-scanner';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-home',
  providers: [Camera, BarcodeScanner],
  templateUrl: 'home.html',
})
export class HomePage {
 option:BarcodeScannerOptions;
  data={};
  res: Observable<any>;
constructor(public camera:Camera,
    public barcodeScanner:BarcodeScanner,
    public navCtrl: NavController,
    public httpClient: HttpClient,
    public toast: Toast,) {}


scan(){
  this.option={
    prompt:"Svp scanner le qr code",
  }
  this.barcodeScanner.scan(this.option).then(barcodeData => {
    console.log(barcodeData);
    this.data = barcodeData;
    var url = 'https://jsonplaceholder.typicode.com/posts'
    let postData = new FormData();
    postData.append('qrInfo', barcodeData);
    this.httpClient.post(url, postData).subscribe(barcodeData=>{
      console.log(barcodeData);
    })
   }).catch(err => {
       console.log('Error', err);
   });
}

Posts: 1

Participants: 1

Read full topic

Display gallery images on iOS Simulator

$
0
0

@serviceminder10 wrote:

When selecting an image from the gallery on the iOS simulator, you get back a file:/// image path. If I make that the src URL on an IMG tag, the image doesn’t show up. I know the camera doesn’t work on the iOS simulator – should gallery images work on the simulator?

Posts: 1

Participants: 1

Read full topic

Viewing all 48984 articles
Browse latest View live


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