@hirenkorat3 wrote:

grid.PNG1087×614 181 KB

i want to set col-lg and col-xl media query percentage 25 to 20
any one know how to set 5 column in ion-grid ?

Posts: 1

Participants: 1

Read full topic

@DianLabuschagne wrote:

import { Injectable } from '@angular/core';
import { SessionProvider } from '../sessionprovider';
import { SqliteProvider } from '../sqlite/sqlite'
import {Storage} from '@ionic/storage'

/*
  Generated class for the ConnectioncheckproviderProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ConnectioncheckproviderProvider {
  state:any;
  // static get parameters() {
  //   return [[HttpClient], [Storage]];
  // }
  
  constructor(private storage: Storage, public http: HttpClient,public session:SessionProvider,public sqlite:SqliteProvider) {
    window.addEventListener('online', this.changestate);
    window.addEventListener('offline', this.changestate);
      storage.get('age').then((val) => {
        console.log('from asyncTest --> Your age is', val);
      });

         setInterval(this.test,5000)

  }
  

  changestate(){
    this.storage.get('age').then((val) => {
      console.log('from asyncTest --> Your age is', val);
    });
    this.state=navigator.onLine ? 'online' : 'offline'
  }```

Please help: Why do I get undefined error - like in the title - when changestate is called, but in the constructor it works fine (get null for the value because there is nothing in storage)?

Posts: 1

Participants: 1

Read full topic

@harshm90 wrote:

How can i access of object in Array within Array?

Complicated Question Right?
Please check below:

Edit2.png1270×689 84.8 KB

In the above image in console.log i get the data within [{…}] which i can access it easily but i don’t know how do i access to the data which is inside sub_item which has Array[5].

I want to show the sub_item Details in the list marked in image. Please Help!!

Posts: 1

Participants: 1

Read full topic

@sribk wrote:

Hi All,

Please let me know how I can increase ion-icon thickness. I’m able to change the size by using font-size. Tried font-weight but did not work

I’m using arrow-forward and arrow-back.

Thanks
Sri

Posts: 1

Participants: 1

Read full topic

@cathrinerathje wrote:

Hello! I need to provide the option of generating running/walking routes based on selected attractions in a city. Then I need to provide turn-by-turn audio guidance, live GPS tracking and small audio stories whenever the user passes an attraction (by its geolocation). For this I’ve used Google Maps API and Google’s Direction Service in my Ionic app. I can generate the routes and display (text-based) directions on my screen. However I can’t seem to figure out whether it’s possible to implement audio guidance and live tracking. I don’t want to use the Google Maps App directly for directions, since I then can’t add the extra audio stories about sights the user passes. Does anyone know if this is even possible in Ionic or how I might go about doing this?
Thanks!!

Posts: 1

Participants: 1

Read full topic

@Rotor7ven wrote:

Hi everyone, is there a way to change the css of the popover from the ion-select? Im using the interface option like stated on the docs and would like the popover to have more width.

<ion-item>
    <ion-label>Popover</ion-label>
    <ion-select interface="popover" placeholder="Select One">
    </ion-select>
  </ion-item>

Posts: 2

Participants: 1

Read full topic

@javiersoto1797 wrote:

I want to change the width of my side menu inside the split pane component so it has a fix size because the app it will only run on the desktop browser. I try to implement the --width property in the variable.scss. If anywant can help me, it is ionic 4 with the side menu in the app.component.html file

Posts: 3

Participants: 3

Read full topic

@arsene123 wrote:

ionic4_capacitor.PNG1366×768 82.7 KB

Posts: 2

Participants: 1

Read full topic

@dev-gilbert wrote:

I am trying to implement a login flow but I’m struggling trying to do this, I’m new to Angular and I have no idea how to handle global variables, not even sure if the whole app re-renders every time there’s a change somewhere (like React).

Anyways, look at my login method:

authenticationState = new BehaviorSubject(false);

login(email, password) {
    console.log("Authenticating...");
    this.http
      .post(
        apiEndPoint + "/auth",
        { email, password },
        { responseType: "text" }
      )
      .subscribe(
        res => {
          this.storage.set(TOKEN_KEY, res).then(() => {
            this.authenticationState.next(true);
          });
        },
        ex => {
          alert(ex.error);
        }
      );
  }

isAuthenticated() {
    return this.authenticationState.value;
  }

So after the form is submitted, the authenticationState value should change to truth and it does, but this does not happen in my authGuard

export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}
  canActivate() {
    console.log(this.authService.isAuthenticated());
    if (!this.authService.isAuthenticated()) {
      this.router.navigate(["login"]);
      return false;
    }
    return true;
  }
}

The value of isAuthenticated() in authGuard is always false (because that’s the initial value) Why is this value not changing after logging in?

Please any help is greatly appreciated

Posts: 1

Participants: 1

Read full topic

@Deepak1233 wrote:

i Am building an app with woocommerce and i am stuck at one problem while fetching the products with json api.
Actually by default it returns only 10 products but i need more than 10 products at once.

	getFilterdProducts() {

	if (this.page == 1) { this.products = []; //this.loading.show(); this.loadingServerData = false; 
	}
	let query = '&page=' + this.page;
	if (this.sortOrder == "Newest") query = query + "&order=desc&orderby=date";
	else if (this.sortOrder == "A - Z") query = query + "&order=asc&orderby=title";
	else if (this.sortOrder == "Z - A") query = query + "&order=desc&orderby=title";

	if (this.type == "featured" || this.filterFeatured) { query = query + "&featured=true"; this.filterFeatured = true; }

	if (this.type == "sale" || this.type == "on_sale" || this.filterOnSale) { query = query + "&on_sale=true"; this.filterOnSale = true; }

	if (this.price.lower != this.minAmount && this.applyFilter == true) query = query + "&min_price=" + this.price.lower;
	if (this.price.upper != this.maxAmount && this.applyFilter == true) query = query + "&max_price=" + this.price.upper;
	if (this.selectedTab != '') query = query + '&cat_id=' + this.selectedTab;
	//query = query + '&page=' + this.page;
	//query = query + this.queryAttributes;
	console.log("custom Id = " + query);
	//this.getAllAttributes();
	this.http.get(this.config.url + '/api/appsettings/ionic_filter_products/?insecure=cool' + query).map(res => res.json()).subscribe(data => {
	if (data.data)
	this.listOfFilteredIdsFromCustom = data.data;
	this.applicationRef.tick();
	this.getFilterdProductsFromWoo();
	});

	}
	getFilterdProductsFromWoo() {

	if (this.listOfFilteredIdsFromCustom.length == 0) { this.infinite.enable(false); //this.loadingServerData = true; this.loading.hide(); 
	return 0; }

	let q = 'products?per_page=50&include=' + this.listOfFilteredIdsFromCustom + "&status=publish";

	console.log(this.listOfFilteredIdsFromCustom);
	if (this.sortOrder == "Newest") q = q + "&order=desc&orderby=date";
	else if (this.sortOrder == "A - Z") q = q + "&order=asc&orderby=title";
	else if (this.sortOrder == "Z - A") q = q + "&order=desc&orderby=title";
	// if (this.type == "featured" || this.filterFeatured) { q = q + "&featured=true"; this.filterFeatured = true; }

	// if (this.type == "sale" || this.type == "on_sale" || this.filterOnSale) { q = q + "&on_sale=true"; this.filterOnSale = true; }
	console.log(q);
	this.config.Woocommerce.getAsync(q + "&" + this.config.productsArguments).then((dat) => {
	//this.loading.hide();
	console.log('this products');
	//console.log(dat.body);
	let data = JSON.parse(dat.body);
	this.infinite.complete();
	if (this.page == 1) { this.products = new Array;this.infinite.enable(true); }
	if (data.length != 0) {
	this.page++;
	for (let value of data) {
	this.products.push(value);
	}
	//this.getFilterdProducts();
	}
	console.log('this is product data');
	console.log(this.products);
	if (data.length == 0 || data.length < 10) {
	this.infinite.enable(false);
	}

	this.applicationRef.tick();
	//this.loadingServerData = true;
	});
	}

help me guys!! thanks

Posts: 1

Participants: 1

Read full topic

@Manel00 wrote:

Hi everyone,

I’m so disturbed because I’m having too many problems with ionic 4 on Xcode making the build, now I have build succeeded but cannot find IPA file… I had to do the trick " sudo ionic cordova build ios --buildFlag="-UseModernBuildSystem=0". " but still missing the IPA file…

Thank you so much

UPDATED:

The error on Xcode is:

Code Signing Error: "MyApp" requires a provisioning profile. Select a provisioning profile for the "Release" build configuration in the project editor.
Code Signing Error: Code signing is required for product type 'Application' in SDK 'iOS 12.1'```

Posts: 1

Participants: 1

Read full topic

@Seoh wrote:

On the first page, I have slides and inside each of these slides, there is a scrollable list of cards. Cards contains multiple elements including ion-img tag to be used as a background.

I am using slides as a container of list because I want list width to be resizable (when pinched) without losing scroll position, and also give snapping effect of the slide component.

if there is only one or two slides in the page, I hardly notice any delay but when I add more slides, (assuming 10 slides, 30 images per list) clicking menu and navigating to another page becomes extremely slow.
(also tried running the app with --prod)

could anyone recommend workaround to solve this?

<ion-content fullscreen scrollY=false forceOverscroll (pinchend)="onPinchEnd($event)" (pinchstart)="onPinchStart($event)">


  <ion-slides [options]="slideOpts" #mySlides >

        <ion-slide  *ngFor="let num of data">
          <ion-card class="feed-name">
            <ion-card-header>
              <ion-card-title>Office</ion-card-title>
            </ion-card-header>
          </ion-card>

          <ion-content>

          <ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content
              pullingIcon="arrow-dropdown"
              pullingText="Pull to refresh"
              refreshingSpinner="circles"
              refreshingText="Refreshing...">
            </ion-refresher-content>
          </ion-refresher>

                  <ion-list>

                    <ion-card *ngFor="let num of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" style>
                      <img class="card-background-image" src="url/of/image"/>
                        <div class="badge-container">
                          <div class="spacer-padding"></div>
                          <div class="badge"></div>
                          <div class="spacer"></div>
                          <div class="badge"></div>
                          <div class="spacer"></div>
                          <div class="badge"></div>
                        </div>
                    </ion-card>

                  </ion-list>
                  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
                    <ion-infinite-scroll-content
                      loadingSpinner="bubbles"
                      loadingText="Loading more data...">
                    </ion-infinite-scroll-content>
                            </ion-infinite-scroll>
    </ion-content>
            </ion-slide>

Ionic:

ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/core : 7.2.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/ng-toolkit : not installed
@ionic/schematics-angular : not installed

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 10 other plugins)

System:

ios-deploy : 1.9.2
NodeJS : v10.12.0 (/usr/local/Cellar/node/10.12.0/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

@aditbharadwaj wrote:

i want to know that in ionic can we change the behavior of the hardware buttons especially power button , iam making an app for emergency situations in which when power button pressed thrice current gps location is stored as well as mic starts recording ? so i was wondering if this type of functionality is possible or not ?

Posts: 4

Participants: 2

Read full topic

@ebeliejinfren wrote:

Hi
in my app when tap(click) an element like item of list the orange border showed on item (and other element that clicked), how solve this issue ?
this issue is in ionic v4, in ionic 3 i haven’t this problem

Thanks

Posts: 1

Participants: 1

Read full topic

@ebeliejinfren wrote:

Hi
i want know it can be possible that when app start and got some data like user data from storage (username, token and etc), the received data reused on other page without getting it again from storage ?

more explane :
user data got from storage in profile page and same received data can be used in comment page

Thanks

Posts: 1

Participants: 1

Read full topic

@adsfelipe wrote:

Is it possible to style or hide this bar?
this won’t work…

::-webkit-scrollbar-track {
    --background: var(--ion-color-pretoMenu) !important;
 }
 ::-webkit-scrollbar {
    display: none;
 }
 ::-webkit-scrollbar-thumb {
    --background: var(--ion-color-pretoMenu) !important;
 }

bar.PNG114×838 1.39 KB

Posts: 1

Participants: 1

Read full topic

@sqr08 wrote:

since the whole email doesn’t fit i would like to add a line break before the @ symbol.

the html looks like this

            <ion-row *ngFor="let email of advisor.emails;">
              <ion-icon class="contactIcons" src="assets/contact_us_icons/envelope_icon.svg"></ion-icon>
              <ion-label class="contactInfo">
                  <a class = "emailParagraph" href="mailto:{{email}}"> {{email}} </a>
              </ion-label>
            </ion-row>

the css looks like

.contactIcons  {
    height: 20px;
    width: 20px;
    padding-right: 8px;
    padding-bottom: 0.9em;
} 

.contactInfo {
    width: 69vw;
    line-height: 1.43em;
}

i’ve tried overflow-wrap, text-overflow, flexwrap and none of those have made any difference

Thanks.

Posts: 1

Participants: 1

Read full topic

@stuball wrote:

Not seeing this listed elsewhere I’m guessing this is likely a newbie mistake. What I’m trying to do is simple: show a list of inputs (with or without a form) within an ion-content tag. On iOS these show up and work properly but on Android devices the label and input within the ion-item remain invisible until I tap on the input and give it focus.

<ion-content>
    <ion-list>
        <ion-item>
            <ion-label>Label One</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Label Two</ion-label>
            <ion-input type="text"></ion-input>
        </ion-item>
    </ion-list>
</ion-content>
``

If I remove the ion-content tag the labels and inputs show fine on Android but then I lose keyboard scrolling and other ion-content features. I've tried various CSS settings and cannot seem to get this to work. 

Any idea what I'm overlooking?

Thanks
Stu

Posts: 1

Participants: 1

Read full topic

@JulioNicolasPapp wrote:

Hello, i have a problem, when i try to run command:
“ionic cordova run browser”
“ionic cordova build android”
“ionic serve lab” etc. that not works and i get this error:

Error: Cannot find module ‘fs-extra’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\nicol\AppData\Roaming\npm\node_modules\ionic\node_modules@ionic\utils-fs\dist\index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)

Can someone help with this? The problem appeared when I used the command “ionic i -g”. Nothing of ionic work after this.

Posts: 1

Participants: 1

Read full topic

@eebrando wrote:

I apologize as I’m sure similar things have been asked before, but I fail to find them when searching. I’m just getting started with my first Ionic app.

How can I override the CSS for the :host elements for the entire Ionic app that I’m making? Where are the default styles for that element coming from? Where would I place overrides? Ideally I would like to unset all of them.

I understand the basics of variables and encapsulation and I’m fine using them for most things, I just want the :host element to have no styles.

Posts: 1

Participants: 1

Read full topic