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

How to use CSS on Ionic 4

$
0
0

@pedro1312 wrote:

That could sound weird, but I’m really new on ionic and I’m having problems figuring out how to use it.

How can I overwrite the global scss using the pages’ css?

I’d like to have a sample…

this is how I was doing on ionic 3:

"page-list-master {

ion-slides {
    height: 50%;
    background-color: #090F11;
    background-size: 100% auto; 
    background-repeat: no-repeat;
    padding-top: 16px;
    padding-bottom: 16px;
    -moz-box-shadow:    inset 0 0 4px #000000;
    -webkit-box-shadow: inset 0 0 4px #000000;
    box-shadow:         inset 0 0 4px #000000;
 }

}"

How can I do the same thing on ionic 4?

Posts: 1

Participants: 1

Read full topic


Quality parameter in cameraOptions for ionic native camera plugin

$
0
0

@faizan1990 wrote:

I am using this camera plugin: https://ionicframework.com/docs/native/camera/

The quality parameter in cameraOptions doesn’t seem to be working on my Android phone. No matter value is use (between 0 and 100) for quality parameter, it doesn’t work. The image is being taken in same quality all the time.

Has anyone come across this issue?

Thanks.

Posts: 1

Participants: 1

Read full topic

Adaptive bitrate Streaming

$
0
0

@syedhope wrote:

Is there a way to achieve Adaptive bitrate Streaming when you have 2 urls streaming on different bitrates?

Posts: 1

Participants: 1

Read full topic

NavController in Ionic

$
0
0

@RehanHassan wrote:

Hi guys,

Actually, i wanna know about Ionic NavController in Ionic 4. As we already know Ionic-4 beta is launched & there’re talks that for navigation system, the frameworks themselves will be responsible, like for Angular there’re Routers for that and Rect & Vue etc…

Personally, i’m very comfortable with Ionic push-pop structure but is it gonna be end in Ionic 4. I mean, would you guys deprecate this component & leave navigation totally on frameworks !!!

Like ionic wont handle navigation itself in future or ioinc will handle navigation itself better than before ???

Posts: 1

Participants: 1

Read full topic

Ion-image not loading when entering the view

$
0
0

@flaviotobias wrote:

I’m using ion-img inside a ion-list, however sometimes the image is not loading, the user must exit and re-enter the page for the image to load.

My ionic info:

Ionic:

ionic (Ionic CLI) : 4.0.1
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.8

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.3, ios 4.5.4

Is there something that I can do to force the image to load when the view is loaded?

Thanks

Posts: 3

Participants: 2

Read full topic

How to pause youtube video when click on power button

$
0
0

@_Ali94 wrote:

I’m trying to upload my app on google play but they always reject it.

When I asked them, the reason of rejection was pointed on “youtube videos not pause when the screen off”

I checked some solutions but its not supported on ionic… please try to help me to solve this issue

Posts: 1

Participants: 1

Read full topic

Ionic changing my plugins versions

$
0
0

@Kyrax80 wrote:

Hello guys, I have the following plugins in my package.json:

"cordova-plugin-ionic": "4.1.7",
"cordova-plugin-ionic-webview": "1.2.1"

I need them to be that specific version, no more no less. But if I do ionic cordova run android, for example, it adds the caret ^ before the version, which will cause next person that download and install that project from a repository to get errors because of version changes, for example the cordova-plugin-ionic plugin goes to 4.2.0.

How can’t I prevent this?

Thanks.

Posts: 3

Participants: 2

Read full topic

Select searchable error after using Lazy loading

$
0
0

@Alimhanna91 wrote:

i’ve updated my app from ionic 2 to ionic 3 and i’ve used Lazy loading
after that , i’ve faced many problems the worst one is :

No component factory found for SelectSearchablePageComponent. Did you add it to @NgModule.entryComponents?
page.html is :

<select-searchable  class="selectMenu1" itemValueField="tid" itemTextField="name" [items]="types"
            [canSearch]="true"
            [canReset]="true"
            (onChange)="portChange($event)" formControlName="carType">
           </select-searchable>```
page.ts : 

portChange(event: { component: SelectSearchable, value: any }) {

}

Posts: 1

Participants: 1

Read full topic


Ionic v4 - I have a question on Page Navigation

$
0
0

@thruthesky wrote:

I am using ion-route-outlet and ion-menu-toggle

I have two pages. page A and page B.

User access page A and page A initialize with life cycle event.

User enter page B.

User go back to page A and How can Page A get ‘life cycle event again?’

Page A don’t get any ionic life cycle event nor Angular life cycle event.

Thank you.

Posts: 1

Participants: 1

Read full topic

Ionic cordova inappbrowser doesn't handle 'http 500 error'

$
0
0

@tousif03raza wrote:

I’ve used ‘InAppBrowser’ plugin to open an url, but it doesn’t handle ‘http 500 error’. ‘Loaderror’ event callback didn’t call, when page didn’t work.

Posts: 1

Participants: 1

Read full topic

Ionic 3 segment + virtual scroll not working

$
0
0

@paulbuscano003 wrote:

Hi,

I have a list and i want to display it with different segments. Please see my code below.

home.html

<ion-grid *ngSwitchCase="'box'" class="no-padding">
       <ion-list [virtualScroll]="patas" [headerFn]="checkInitialChange" 
    approxItemHeight="100px" approxHeaderHeight="80px">
    
      <ion-item *virtualItem="let pata">
          <span>
            <h1>{{pata.clock}}</h1>
            <p>{{pata.familyName}}</p>
          </span>
      </ion-item>
    </ion-list>
</ion-grid>

home.ts

  sample(){ 

      this.http.get('https://api.wh.geniussports.com/v1/basketball/matches/784483/actions?ak=eebd8ae256142ac3fd24bd2003d28782&limit=5000')
      .map(res => res.json())
      .subscribe(data => {
        this.patas = data.response.data;  
        console.log(this.patas);
      }, err => {
        console.log(err); 
      });
    }

Posts: 1

Participants: 1

Read full topic

Carousel middle of the screen in ionic

$
0
0

@rammohanb wrote:

I have below code to run carousel in my ionic app

  <ion-slides autoplay="1000" loop="true" speed="500">
      <ion-slide *ngFor="let item of video">
        <img [src] ='item.imge'/>
      </ion-slide>
    </ion-slides>
    <h5>this is the text </h5>
</ion-content>

but the content is displaying like below

how to align them properly, if I write css like below it will display good.
<ion-slide style="height: 100vh;display: block;vertical-align: initial;" *ngFor="let item of video"> and <h3 style="position:absolute;top:350px">Most Viewd</h3>

is it compulsory to write CSS for each item in my page? why should it be like this? please let me know

Posts: 4

Participants: 2

Read full topic

Is it true that Slides works bad with tab layout Ionic 3 app

$
0
0

@hsmbdr86 wrote:

I read somewhere that slides do not work properly in ionic app with tab layout (I tried my self this one and spent a lot of time on it). Is there any way to deal with this issue?

Posts: 1

Participants: 1

Read full topic

Actionsheet Customization

$
0
0

@dennismuchiri086 wrote:

Hi Community, I enquire about the actionsheet. Is there a way to modify it so it behaves like the android bottomsheet ? To disable the tint and disable dismiss onclicking outside the actionsheet?

Posts: 1

Participants: 1

Read full topic

How to catch an error from Observable in this scenario?

$
0
0

@Kyrax80 wrote:

Hello guys, I have the following code:

getVideos(): Observable<CategoriaVideoExplicativo[]> {
    return new Observable(observer => {
      this.http.get<CategoriaVideoExplicativo[]>("http://" + "localhost:8080"+ "/PortalPacienteRSHQ/api/v1/videos/get/0")
      .subscribe(categorias => {
        ...
        observer.next(...);
        observer.complete();
      });
    })
  }

With this kind of code how can I handle the error that could occur in this.http.get<CategoriaVideoExplicativo[]>... from where I call this method?
I’ve tried various combinations and none of them worked.

Thanks

Posts: 1

Participants: 1

Read full topic


Use ImageMapResizer with ionic

$
0
0

@JEricaM wrote:

Hi
I would like to use in my application this plugin


I’ve installed it with npm but I don’t know how to include in my app and use it.
I’ve imported it in the page where I want use this with

import { imageMapResize } from 'image-map-resizer';

then add into the constructor
public imageMapResizer: imageMapResize,

and

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProfilePage');
    $('map').imageMapResize();
  }

but it gives me an error about imageMapResize telling me that it’s not found.

I don’t understand how to use this plugin into a ionic project, can you help me?
Thank you

Posts: 1

Participants: 1

Read full topic

ReferenceError: google is not defined - ionic v3.9.2, angular v5.2.11

$
0
0

@qaudaffyazmi wrote:

Hello guys, i know this error is pretty common but i still have no idea which part did i do wrong.

i already did

npm install @types/google-maps --save-dev

and

import { google } from 'google-maps';

and try declare all 3 before the component

declare var google: any;
declare var google;
declare var google: google;

The .ts file

import { Geolocation } from '@ionic-native/geolocation';
import { google } from 'google-maps';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-add-record',
  templateUrl: 'add-record.html',
})

export class AddRecordPage {
constructor(public navCtrl: NavController, public navParams: NavParams, public authService: AuthServiceProvider, public alertCtrl: AlertController, public actionSheetCtrl: ActionSheetController, private camera: Camera, public platform: Platform, private geolocation: Geolocation) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap(){
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions) 
  }
}

The Error

ERROR ReferenceError: google is not defined
    at AddRecordPage.webpackJsonp.162.AddRecordPage.loadMap (add-record.ts:55)
    at AddRecordPage.webpackJsonp.162.AddRecordPage.ionViewDidLoad (add-record.ts:37)
    at ViewController._lifecycle (view-controller.js:486)
    at ViewController._didLoad (view-controller.js:369)
    at NavControllerBase._didLoad (nav-controller-base.js:768)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at NgZone.run (core.js:4577)

Posts: 1

Participants: 1

Read full topic

Ionic 4 and LTS?

$
0
0

@schngrg wrote:

Have they announced details for LTS plan for v4? This is probably most critical for us.

We are finding it hard to convince clients already bitten once by angular upgrade costs and now second time with ionic upgrade costs. That v3 stopped getting any fixes 9 months ago further hurt the sentiment, and puts a sense of unnecessary urgency behind upgrading to v4 - which isn’t ready yet.

LTS for v3 for 1 year after v4 release would have been best. Small things like upgrading v3 for Angular 6, 7, TypeScript vNext etc… would mean that clients can postpone v4 upgrade for a while longer. And we as an agency can schedule projects to upgrade them 1-by-1 at a steady pace instead of having to rush through it.

In absense of v3 LTS, v4 LTS should be at least 2 years after vNext is released.

Posts: 10

Participants: 4

Read full topic

Display json data

$
0
0

@prosper1 wrote:

{
“result”: {
“cardNumber”: “19”,
“surname”: “Pretorius”,
“fullName”: “Frederik R”,
“namePreferece”: “Ferdie”,
“idNumber”: “5907145055084”,
“homePhoneNumber”: null,
“workNumber”: “0147632273”,
“alternativeEmail”: “”,
“membershipType”: 5,
“paid”: “180”,
“yearlyFee”: null,
“renewalDate”: “0001-01-01T00:00:00”,
“memberSince”: “2010”,
“receipt”: 2,
“streetAddress”: “14 Kudu Park”,
“areaAddress”: “34 Gazel Ave, Hutten Heights”,
“cityAddress”: “Newcastle”,
“residentialCode”: null,
“medicalAidName”: “Bonitas”,
“medicalAidNumber”: “47600186765 “,
“medicalEmergencyNumber”: “0860002108”,
“iceName1”: “Hendrina”,
“iceNumber1”: “0128894172”,
“iceName2”: null,
“iceNumber2”: null,
“iceName3”: null,
“iceNumber3”: null,
“iceName4”: null,
“iceNumber4”: null,
“occupation”: “Pensioner”,
“motercyclesOwned”: null,
“awardsObtained”: null,
“motorcycles”: null,
“userAwards”: null,
“extraMembersId”: null,
“clubNameTag”: null,
“mainCommittee”: false,
“ridesCommittee”: false,
“memberCommittee”: true,
“appAccess”: true,
“newsletter”: true,
“eventsNotification”: true,
“primaryMemberCard”: “0”,
“membershipKey”: 1,
“medicalCondition”: null,
“medicalAllergies”: null,
“joinDate”: “2017-03-01T00:00:00”,
“paymentDate”: null,
“membershipExpires”: “2019-03-31T00:00:00”,
“gender”: 1,
“membershipStatus”: 1,
“postalCode1”: null,
“postalCode2”: null,
“postalCode3”: null,
“postalCode4”: null,
“note”: null,
“tar”: true,
“gravel”: true,
“pillion”: false,
“levelOfRider”: 1,
“id”: “768a13a0-a3ae-4b9f-bc62-7846d2cccfa4”,
“userName”: “19”,
“normalizedUserName”: “19”,
“email”: "ferdiepretoriusbmw@gmail.com”,
“normalizedEmail”: "FERDIEPRETORIUSBMW@GMAIL.COM”,
“emailConfirmed”: false,
“passwordHash”: “AQAAAAEAACcQAAAAEJhjEzpDIh6ofZWIeB6W/m6yHuEJLaSWGlsDGjK3oCyELVNX9RIz5lDXf3R0RNZufQ==”,
“securityStamp”: “5adc1ccf-7b40-4d95-9f67-992696218e90”,
“concurrencyStamp”: “4044e66c-826b-4342-b9b8-7af4a74e671c”,
“phoneNumber”: “0833040213”,
“phoneNumberConfirmed”: false,
“twoFactorEnabled”: false,
“lockoutEnd”: null,
“lockoutEnabled”: true,
“accessFailedCount”: 0,
“roles”: [],
“claims”: [],
“logins”: []
},
“id”: 2,
“exception”: null,
“status”: 5,
“isCanceled”: false,
“isCompleted”: true,
“creationOptions”: 0,
“asyncState”: null,
“isFaulted”: false
}

Posts: 1

Participants: 1

Read full topic

How to use nested providers?

$
0
0

@ioclaudio wrote:

Hi,
I’m using three Providers in my app: settingsprovider, qrcodeprovider and wsprovider.

  • qrcodeprovider and wsprovider use settingsprovider
  • qrcodeprovider uses wsprovider

“Uses” means that a method of a Provider can call the method of another Provider.

A page can use one or more of these Providers.

Is it correct to import all of them in a Page (if it uses all of them) or this will be a problem in the future?

 constructor(private navCtrl: NavController,
              private navParams: NavParams,
              private settings:SettingsProvider,
              private wsmanager: WsmanagerProvider,
              private qrcodemanager: QrcodemanagerProvider)

Thank you

cld

Posts: 2

Participants: 2

Read full topic

Viewing all 49246 articles
Browse latest View live


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