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

Split Pane not displaying correctly

January 25, 2019, 10:44 am
$
0
0

@wildsun wrote:

First note, I’m using @ionic/vue so it could be in that or it could be Ionic on the whole.
Either way, it seems a pretty foundational issue

Using code almost identical to that described here;

Exact code can be read here;

The issue I’m running into is that when the screen size is greater than small, so it splits the screen, the menu is not displaying correctly. And when the screen size is small, so it has a pull out menu, the length of the text in the header determines the width of the header and the entire screen, rather than it filling the length of the screen as one would expect.

Here’s images to better describe what’s going on;

20%20AM
Screen Shot 2019-01-25 at 11.37.20 AM.png1646×1138 13.4 KB
38%20AM
Screen Shot 2019-01-25 at 11.37.38 AM.png976×1138 10.6 KB
54%20AM
Screen Shot 2019-01-25 at 11.37.54 AM.png976×1138 8.66 KB

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic keyboard push any footer element to top

January 25, 2019, 11:58 am
$
0
0

@levinvm wrote:

When i open the keyboard, it push any position absolute and bottom 0 element to top. Any ideas of how to fix this?

Padding in scroll-content dont work.

Posts: 2

Participants: 2

Read full topic

↧
↧

Example ionic-native/web-server

January 25, 2019, 12:07 pm
↧

Ion-slides as a parent component with horizontally scrollable items inside

January 25, 2019, 12:19 pm
$
0
0

@EssamEid614 wrote:

Hello , i have a use case where i have a couple of slides and inside each slide a different component dependent on api reply , now i know which components are going to be horizontally scrollable and which arent but i dont know how to achieve this to enable horizontal scrolling if the swipe gesture is on the component itself its a swipe to scroll and if its on the empty space under the component then its a swipe to get the next slide ,
this is my current code for that part


<ion-slides [pager]='true' >
<ion-slide *ngFor="let Page of Pages">
.
.
.

<ng-container *ngIf="Page.PageType=='some page type' ">
                <scrollable component ></scrollable component >
  </ng-container>
.
.
.

</ion-slide>

where the dots represent other components , also one of the slides contains a map and when i try to swipe to move around in the map it simply switches to the next or previous slide , all i need to do is detect if this swipe is on the component itself so i need to scroll or if this swipe is on the empty area in the slide so swipe to the next slide any ideas ?
thanks

Posts: 1

Participants: 1

Read full topic

↧

Looking for a quick start for @ionic/react

January 25, 2019, 1:32 pm
$
0
0

@realtebo wrote:

I’m trying to follow the few instructions here: https://www.npmjs.com/package/@ionic/react

So i first used create-react-app, then installed @ionic/latest @ionic/core and@ionic/react

Then executed ionic init (custom)


ionic capacitor add android
ionic capacitor copy
ionic capacitor run

but at this point my vojage stopeed

> $ ionic capacitor run
? What platform would you like to run? android
[ERROR] Cannot perform build.

        Since you're using the custom project type, you must provide the ionic:build npm script so the Ionic CLI can
        build your project.

I don’t find how to add this build command…

I added this to package.jsonn scritps

  "ionic:build": "react-scripts build"

Running again ionic capacitor run android i got warning about need of router module

.\node_modules\@ionic\react\dist\components\navigation\IonTabBar.js
Cannot find module: 'react-router'. Make sure this package is installed.

You can install this package by running: yarn add react-router.

So I executed

npm add react-router --save

And re-runn ionic capacitor run android

It did a LOT of things, and also opened automatically Android Studio (I was using Vs Code on Windows 10) when the build phase began.It also downloaded a LOT of packages related to Android from official Google repository.

I at last, faced with this error

Cannot load module file ‘C:/Progetti/ionic/ionic-react/android/android.iml’:
File C:\Progetti\ionic\ionic-react\android\android.iml does not exist
Would you like to remove module ‘android’ from the project?

Any Idea of what was the attended procedure ?

Posts: 1

Participants: 1

Read full topic

↧
↧

Having error when add Device in provider

January 25, 2019, 5:08 pm
$
0
0

@corinekamlo wrote:

Hello!
I would like to use the ionic Device plugin to get the IMEI of the device on which my application is running.
I managed to install the plugin but when I try to add it in the providers, I have the error:
Type ‘DeviceOriginal’ is not assignable to type ‘Provider’.
Type ‘DeviceOriginal’ is missing the following properties from ‘FactoryProvider’ type: provide, useFactory [2322]

here is the information of my environment:

 @ ionic / cli-utils: 1.19.3
 ionic (Ionic CLI): 3.20.1

global packages:

 cordova (Cordova CLI): 8.1.2 (cordova-lib@8.1.1)

local packages:

 @ionic / app-scripts: 3.2.1
 Cordova Platforms: none
 Ionic Framework: ionic-angular 3.9.2

System:

 Android SDK Tools: 25.2.5
 Node: v6.11.0
 npm: 3.10.10
 OS: Windows 8

Environment Variables:

 ANDROID_HOME: C: \ sdk

Misc:

 backend: pro

thank you for helping me

Posts: 1

Participants: 1

Read full topic

↧

How to resize an image base64 string and return a new base64 string of the resized image?

January 25, 2019, 6:14 pm
$
0
0

@skildfrix wrote:

I wanted to resize images captured by the CameraPreview plugin to 600x600. I have tried the sample code from the Image Resizer and enabled base64: true in accordance to the plugin’s Official GitHub README because I wanted it to return a base64 string of the resized image instead of it creating a file and returning a file path. However, it seems that I cannot make the plugin work as I wanted it to be and still creates a file and returns a file path instead of a base64 string.

Image Resize function code:

Here's my code that accepts base64 string without "data:image/jpeg;base64," because I spitted it beforehand. 
private imageCompressor(base64ImageString: string) {
    // this function handles the operation to resize the image from it's original properties
    // this function returns base64 string of the resized image
    console.log('Image base64 ' + base64ImageString);

    let options = {
      uri: base64ImageString,
      quality: 100,
      width: 600,
      height: 600,
      base64: true
    } as ImageResizerOptions;

    this.imageResizer
      .resize(options)
      .then((info) => console.log(info))
      .catch(e => console.log(e));
  }

I wanted it to return the base64 string of the resized image alone instead of it creating a file and returning the file path. Please help me to find what I missed or recommend the better alternative way of doing this. Thank you!

Posts: 1

Participants: 1

Read full topic

↧

AdmobFree is not working

January 25, 2019, 8:19 pm
$
0
0

@mathewk wrote:

hey, i am trying to use admobfree plugin but it is not working at all and showing error.

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private admobFree: AdMobFree
  ) {
    const bannerConfig: AdMobFreeBannerConfig = {
        // add your config here
        // for the sake of this example we will just use the test config
        isTesting: true,
        autoShow: true
      };
       this.admobFree.banner.config(bannerConfig);
      
       this.admobFree.banner.prepare()
         .then(() => {
           // banner Ad is ready
           // if we set autoShow to false, then we will need to call the show method here
        })
        .catch(e => console.log(e));
  }

I just tried the same example given in documentation but i am getting this error

TypeError: Object(…) is not a function

Ionic:

ionic (Ionic CLI) : 4.1.2 (C:\Users\mathewkutty\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 5 other plugins)

these are my environment info.

i am using ionic cordova 0.20 version and tried newest versions also

“@ionic-native/admob-free”: “^5.0.0”,
“cordova-plugin-admob-free”: “^0.20.0”,

any got this error.please help.

Posts: 2

Participants: 2

Read full topic

↧
Search

Ionic 4 beta to standard mode

January 25, 2019, 11:32 pm
↧
↧

Amazon Lex integration in Ionic using amplify

January 26, 2019, 12:09 am
$
0
0

@praveeshree077 wrote:

I am struggling from couple of days to get the lex working in my ionic app. AWS amplify documentation is really not helping. Can somebody please shed some light in this regard.

Trying to use amplify-interactions component but getting the error bot is not found.

Posts: 1

Participants: 1

Read full topic

↧

Getting blank page with compiled successfully

January 26, 2019, 12:20 am
$
0
0

@fallebdi wrote:

Hi Everyboy,

My components are loading as expected, but the views (HTML files) is not.

There are no errors in the console and compiled successfully.

It was working fine two days ago. there no changes.

I am trying to find the root cause with your help.

ionic info:
@ionic/angular 4.0.0-rc.1
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

Is anybody faced like this behaviour?

Posts: 1

Participants: 1

Read full topic

↧

Updated from 4 rc to V4 -> ionicon not showing

January 26, 2019, 12:28 am
$
0
0

@A1development wrote:

Hi all,

i just updated my project to V4 from 4 RC.
I also updated some other dependencies with NCU -u

Now everything works ecept the ionicons.
I get GET http://localhost:8100/svg/md-search.svg 404 (Not Found) etc.

i deleted node_modules, ran npm install again.
I have no idea how to fix this?

Can anyone help?

Here are my dependencies from package.json

"dependencies": {
    "@angular/common": "~7.2.2",
    "@angular/core": "~7.2.2",
    "@angular/fire": "^5.1.0",
    "@angular/forms": "~7.2.2",
    "@angular/http": "~7.2.2",
    "@angular/platform-browser": "~7.2.2",
    "@angular/platform-browser-dynamic": "~7.2.2",
    "@angular/router": "~7.2.2",
    "@capacitor/cli": "1.0.0-beta.14",
    "@capacitor/core": "1.0.0-beta.14",
    "@ionic-native/core": "5.0.0",
    "@ionic-native/splash-screen": "5.0.0",
    "@ionic-native/status-bar": "5.0.0",
    "@ionic/angular": "^4.0.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "^2.2.0",
    "@types/algoliasearch": "^3.30.1",
    "algoliasearch": "^3.30.0",
    "angularfire2": "^5.1.1",
    "cordova-sqlite-storage": "^2.6.0",
    "core-js": "^2.6.3",
    "firebase": "^5.8.1",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "^1.2.0",
    "@types/jasmine": "~3.3.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.12.0",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.2",
    "tslint": "~5.12.1",
    "typescript": "~3.2.4"
  },

Posts: 1

Participants: 1

Read full topic

↧

Ionic web api not getting data

January 26, 2019, 2:21 am
$
0
0

@imfairozkhan wrote:

Hi all,
I am pretty new to ionic framework. I have deployed my web api on remote server without ssl certification. I am able to fetch the data when I run the ionic app via ionic serve. But when I publish the ionic app, data from web api is not getting fetched.

Please help me in this regard

Thanks all

Posts: 1

Participants: 1

Read full topic

↧
↧

Assistance in animating div

January 26, 2019, 2:24 am
$
0
0

@pierrephilipdp wrote:

Hey guys,

I am pretty new Ionic and am mostly a backend dev so this is like a whole new world to me. I absolutely love Ionic, the whole experience is great, it allowed me to prototype my app quite quickly.

Anyway - on to the question. I followed a tutorial on how to create a accordion menu, which looks quite nice, but I would like to animate the div that gets expanded. I have tried adding transition: all 1s ease; on the div itself but that didn’t do anything, I tried adding it onto the ion-item with no luck either. Can someone with some more CSS knowledge maybe help me out?

Here is the code in question:

<ion-list *ngFor="let item of information; let i = index;" class="accordian-list" lines="none" detail="false"
    no-padding>

    <ion-item tappable attr.id="section{{i}}" (click)="toggleSection(i)" class="accordian-section ion-activatable">
      <ion-ripple-effect></ion-ripple-effect>
      <fa-icon [icon]="['fas', 'plus']" slot="start" *ngIf="!item.open"></fa-icon>
      <fa-icon [icon]="['fas', 'minus']" slot="start" *ngIf="item.open"></fa-icon>
      <ion-label>
        {{ item.name }}
      </ion-label>
    </ion-item>

    <div *ngIf="item.children && item.open">
      <ion-list *ngFor="let child of item.children; let j = index;" lines="none" class="accordian-child-list">
        <app-information [information]="child" *ngIf="!child.children" class="test"></app-information>
      </ion-list>
    </div>

  </ion-list>

Posts: 1

Participants: 1

Read full topic

↧

IONIC Azure Login not working

January 26, 2019, 3:10 am
↧
Search

Ionic 4 - sass best practices

January 26, 2019, 4:17 am
$
0
0

@rtpHarry wrote:

The background of my app I’m setting my ion-content to a background colour.

This means I want all of my ion-card to have a white background.

It’s supported in the docs, it says I should do this:

// (theme\variables.scss)
ion-card {
  --background: var(--brand-white) !important;
}

But then a sneaky rule jumps in and overrides it:

image

I have to put !important on the ion-card --background variable to get it to work.

I’m just starting out so I’m keen to learn best practices. Am I doing something wrong?

This works:

// (theme\variables.scss)
ion-card {
  --background: var(--brand-white);
  --ion-item-background: var(--brand-white);
}

Is this a bug in the element or maybe the documentation? Or am I doing it wrong?

Posts: 1

Participants: 1

Read full topic

↧

ngFor not working ionic 4

January 26, 2019, 4:20 am
$
0
0

@Piterski wrote:

Hi everyone,
i want to build my first app but my list dont want to show.
Please help

import { Component } from '@angular/core';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public items;

	

   ionViewDidLoad(): string{
  	this.items = [
  		{title: 'Notatka 1', description: 'Opis notatki 1'},
  		{title: 'Notatka 2', description: 'Opis notatki 2'},
  		{title: 'Notatka 3', description: 'Opis notatki 3'}
   	];
   return this.items;
   }
}

<ion-content>
  <ion-list padding>
  	<ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}<p>{{item.description}}</p></ion-item>
  </ion-list>
</ion-content>

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 4 - Multiple lines button with href

January 26, 2019, 7:32 am
$
0
0

@SnkrsFind wrote:

Hi,

just trying to make a button wrap around the text content.

here is my code

<ion-button buttonType="button" expand="block" fill="clear" class="sign-up-btn" href="#">Don't have an account? Sign up here.</ion-button>

I tried the css code I got from the forums but it is not working as expected.
.sign-up-button{
.button-inner {
flex-flow: column;
}
}
Any advice is welcomed.

Posts: 1

Participants: 1

Read full topic

↧

Ionic-native/network-interface Error: Class Not Found

January 26, 2019, 9:14 am
$
0
0

@Brianmtreese wrote:

Hello, I’m trying to use the Ionic Native Network Interface plugin but keep failing to get the wifi ip address and I’m not sure why. I would love for someone to point me in the right direction if possible.

Here’s what I have currently:

import { NetworkInterface } from '@ionic-native/network-interface/ngx';
import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';

@Injectable()
export class MyService {
    constructor( private networkInterface: NetworkInterface, private platform: Platform ) {
        platform.ready().then(() => {
            this.networkInterface.getWiFiIPAddress()
                .then(address => console.log('IP: ' + address.ip + ', Subnet: ' + address.subnet))
                .catch(error => console.log('ERROR: ' + error));
        });
    }
}

Posts: 1

Participants: 1

Read full topic

↧

Unable to start an Ionic v3 projetc

January 26, 2019, 10:19 am
↧
Viewing all 70434 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>