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

Ionic 4 problem when adding content before ion-virtual-scroll

$
0
0

@alnassreit wrote:

I have this code and it’s working totally fine using ionic 4 and angular 8

<ion-content>
<ion-virtual-scroll>
...
...
...
</ion-virtual-scroll>
</ion-content>

after added some content before ion-virtual-scroll it cost to this problem. the items not showing in the right time [see Gif]

<ion-content>
<div class="content-header">...</div>
<ion-virtual-scroll>
...
...
...
</ion-virtual-scroll>
</ion-content>

when I display:none the class .content-header it work fine again.

Q:

is there a way to make ion-virtual-scroll load more content on the screen?

is there a way to hide the .content-header after scrolling down (may it work)?

Posts: 1

Participants: 1

Read full topic


Auth Guards with observables for 2 routes not working when i use route.navigate

$
0
0

@jesuscardenas wrote:

Hi Guys, I hope you’re doing very well.

I’m here 'cause I have been coding an app with Ionic 5
Angular CLI: 8.3.25
Node: 12.16.1
OS: win32 x64
Angular: 8.2.14

But i have added 2 route guards to 2 routes which should redirect to a different route when the user is not logged in, however it’s not working since when the auth guard it’s called, the app renders nothing, the screen become blank. When i delete the canActivate property from 1 route, the other one works perfectly. I dont know what can i do, i have been stuck in this issue for a long time.

I’m working with aws amplify for the auth system. I attached my github repo for you reference. Please work with the branch dev.

swapp\src\app\app-routing.module.ts in this file i have the routes.
swapp\src\app\auth.guard.ts this is one auth guard
swapp\src\app\auth1.guard.ts this is the other one

i have 2 routes
http://localhost:8100/home working well
http://localhost:8100/auth not workin

user for login: jacc_2008@hotmail.com
password: Asdf123*

Please help guys! thanks in advance.

Posts: 1

Participants: 1

Read full topic

How to shrink the view with the keyboard on Android dynamicly?

app.getActiveNav().getActive() is undefined

$
0
0

@pdj wrote:

when it comes to last page(HomePage), I want to exit app.

but the problem is that weirdly,
app.getActiveNav().getActive() is undefined.
and

I took a look closer on app.getActiveNav()
(I checked Log and saw undefined on root)

my code is located in app.components.ts

   platform.registerBackButtonAction(() => {
        let nav = this.app.getActiveNav().getActive()
        let activeView = nav.getActive();
      
      console.log("back pressed");
      console.log(nav)
      console.log(activeView)
           nav.pop();
          });

weirdly , I came to second page from homepage,
when I press back button on hardware,
it says no views in the stack to be removed
(I came to second page by using navCtrl.push())

Posts: 1

Participants: 1

Read full topic

Ionic build error#2

[cordova-tools] error processing "launch":Error running android

$
0
0

@akfe wrote:

when i run app on device i have get some error “[cordova-tools] error processing “launch”:Error running android” anyone know how can i solve it my launch.json setting is

{
“name”: “Run android on device”,
“type”: “cordova”,
“request”: “launch”,
“platform”: “android”,
“target”: “device”,
“sourceMaps”: true,
“cwd”: “${workspaceFolder}”
}

Posts: 1

Participants: 1

Read full topic

Using Ionic Gesture to improve touch and reactions

$
0
0

@scotchegg wrote:

We are using Ionic 5 and I have noticed if the user does not make a clean tap/click, instead perhaps moving their finger slightly the touch is recognised, however the event to click / router link is not firing. Instead a flash colour shows a touch but does not trigger the touch / routerlink.

   <ion-card [routerLink]="['./'+void.void_id]">

Is there any clear guidelines on using the Gesture API to improve this particular issue beyond the weak offical documentation page?

Thank you for anyone’s input or suggestions.

Posts: 1

Participants: 1

Read full topic

Persistence/Redirect for Tabs

$
0
0

@Stubbsie1 wrote:

Hi there,

I am working on an app using tabs and a firebase login system. The issue I am having is on the “profile” tab you have the login page which when you login redirects that page to a profile page. The issue lies when I click on either of the other 2 tabs then return to the “profile” tab. That tab will then display the login page again even though I am already logged in.

What I am trying to figure out is if there is a way that when I click another tab and come back, it will display the profile page and not the login. Sort of like a redirect that if logged in display the profile page or if not logged in display the login page.

Posts: 1

Participants: 1

Read full topic


Top 12 60-inch Duffel Bag

$
0
0

@Masonate wrote:

All discussion about the duffel bags and we have found the most durable 60-inch duffel bags which have been designed with the sole purpose of making travelling easier for you. Be it strapless, extra-large, carry-on or bags with wheels we have all kinds to bags right here for you to explore. Learn more

Posts: 1

Participants: 1

Read full topic

How to change background of radio button group in Ionic app?

$
0
0

@Sweg wrote:

I am trying to create a Sign Up form in my ionic app below.

It includes a group of radio buttons with 2 options.

I am having trouble formatting the row that includes the radio group to match the others.

I’ve attached a screenshot of the existing behaviour below.

signUp

Can someone please tell me how I can get the background of the radio buttons to match the other rows (white)?

Also, I’m not sure if I’m putting the label for the radio-group in the correct place.

Please find my code below, thanks a lot in advance!

<ion-grid style="width: 75%">

    <ion-label>Account Type:</ion-label>

    <ion-row class="rowStyle">
      <ion-radio-group>
        <ion-row>
          <ion-item>
            <ion-label>Customer</ion-label>
            <ion-radio value="customer"></ion-radio>
          </ion-item>

          <ion-item>
            <ion-label>Supplier</ion-label>
            <ion-radio value="supplier"></ion-radio>
          </ion-item>

        </ion-row>
      </ion-radio-group>

    </ion-row>

    <ion-row class="rowStyle">

      <ion-icon name="person" color="secondary"></ion-icon>

      <ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>

    </ion-row>

    <ion-row class="rowStyle">

      <ion-icon name="mail" color="secondary"></ion-icon>

      <ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>

    </ion-row>

    <ion-row class="rowStyle">

      <ion-icon name="key" color="secondary"></ion-icon>

      <ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>

    </ion-row>

  </ion-grid>

Here is the CSS:

ion-content {
    --ion-background-color:#3dc2ff;
  }

  .logo { 
    font-size: 25vh;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  h1, h6 {
    color: white;
    font-size: 1em;
    background-color: danger
  }

  .rowStyle {
    background-color: white;
    padding-left: 10px;
    border-radius: 30px;
    margin-bottom: 10px;
 
    ion-icon {
      margin-top: 13px;
      margin-right: 10px;
    }
  }

Posts: 1

Participants: 1

Read full topic

Why have ion events?

$
0
0

@lhk wrote:

I’m trying to figure out the roadblocks in using ionic with vue or preact.
From your ionic/vue codebase:

Create a wrapped input component that captures typical ionic input events
and emits core ones

Is there a reason (beside historical) to have your own event system?

It looks to me as if these custom events are basically the only thing that require special workarounds before using a framework with out-of-the-box support for web components (like preact or vue). Is that correct?

Posts: 1

Participants: 1

Read full topic

[HTTP.POST] How to resolve 'preflight is invalid (redirect)?

$
0
0

@vsued wrote:

Test send post with postman, work fine:

Hi, im send post for an url and return message:

Failed to load https://xxxxxx.xxxxxx.com.br/arcgis/rest/services/Hosted/assignments_4f20dc57d59b4f27af25ca4bb519ce27/FeatureServer/0/query: Response for preflight is invalid (redirect)
log-helper.ts:15
core.es5.js:1020 ERROR Error: Uncaught (in promise): [object Object]
at c (polyfills.js:3)
at polyfills.js:3
at polyfills.js:3
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:3890)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.es5.js:3881)

ionic.config.json

environment.base.ts

Method for get token work fine… look not send headers…

async getTokenWorkForce(){
    return this.loginWorkForce();
}

    async loginWorkForce(): Promise<any> {
        return new Promise(async (resolve, reject) => {
            const username = Environment.username_workforce;
            const password = Environment.password_workforce;

            let formData: FormData = new FormData();

            formData.append('referer', this.apiServiceProvider.URL_OS_ORDEMSERVICO_WF_TOKEN);
            formData.append('username', username);
            formData.append('password', password);
            formData.append('client', 'referer');
            formData.append('f', 'pjson');

            this.http.post(this.apiServiceProvider.URL_OS_ORDEMSERVICO_WF_TOKEN, formData)
                .subscribe((response) => {
                    const json = response.json();
                    this.loggedUserTokenWF = `${json.token}`;
                    resolve(this.loggedUserTokenWF);
                });            
        })
    }

This method return error, with header…

    public async postWorkForceFindAssigmentOS(nroOS: number, outFields: string): Promise<any> {
        return new Promise(async (resolve, reject) => {
            const url = this.apiServiceProvider.URL_OS_ORDEMSERVICO_WF_GET_ASSIGNEMENTS;

            const formData = new FormData();
    
            formData.append('outFields', `${outFields}`);
            formData.append('where', `workorderid='${nroOS}'`);
            formData.append('Units', 'Feet');
            formData.append('returnGeometry', 'pjson');
            formData.append('f', 'false');
            await this.authProvider.getTokenWorkForce();

            let header = new HttpHeaders();

            console.log('Token WF: ' + this.authProvider.loggedUserTokenWF);
            header = header.set('Authorization', `Bearer ${this.authProvider.loggedUserTokenWF}`);

            this.httpServiceProvider
                .postWorkForce(header, url, formData)
                .subscribe(response => {
                    console.log(response);
                    resolve(response);
                }, (err) => {
                    LogHelper.logError(err);
                    reject(err)
                });
        });
    }

    postWorkForce(
        headers: HttpHeaders,
        url: string,
        model: any,
        times: number = 3
    ) {
        return this.http.post(
            url,
            model,
            {
                headers: headers
            }
        ).pipe(retry(times));
    }

Posts: 1

Participants: 1

Read full topic

Ionic 4 protocol buffer

$
0
0

@iozer wrote:

Hello, for my project I need to use protocol buffers instead of json. However I could not find any tutorial or resources for that. Is it possible to use protocol buffers in ionic 4. Also is there any documentation or tutorial for that ? Thank You.

Posts: 1

Participants: 1

Read full topic

Iframe and phone notch

$
0
0

@akbeyond wrote:

I am using Intercom in my application and it works fine, however, since the messenger pops up in an iframe it does not account for the notch for iPhone X or similar devices and it covers the status bar. I have tried adjusting the iframe CSS for this several ways and I can’t get it to work.

Posts: 1

Participants: 1

Read full topic

watchOS indipendente application


Cannot find module “.” on release build

İonic Json Data Search Select how can I do it

$
0
0

@bilalbakirci44 wrote:

İonic Json Data Search Select how can I do it

Home.ts

import { Component, Provider } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ApiProvider } from '../../providers/api/api';
import { Observable } from 'rxjs/Observable';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { DetailPage } from '../detail/detail';
import SearchPage from '../search/search';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  datas: any;
  public get http(): HttpClient {
    return this._http;
  }
  public set http(value: HttpClient) {
    this._http = value;
  }
  
  public items:any = [];
  constructor(public navCtrl: NavController, 
              public api:ApiProvider, 
              private _http: HttpClient) {
     this.api.get().subscribe((stringToJsonObject)=>{
       console.log(stringToJsonObject);
       this.getData();
     });
   }
  
  getData(){
    let url = 'https://www.clinicbuzlazer.com/wp-json/wp/v2/alsp_listing?_embed';
    let data: Observable<any> = this.http.get(url);
    data.subscribe(result =>  {
      this.items = result;
    });
  }

  openDetail(item){
    this.navCtrl.push(DetailPage, {post:item});
  }

  openSearchPage(){
    this.navCtrl.push(SearchPage);
    }


  

}

Detail.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

/**
 * Generated class for the DetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */


@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html',
})
export class DetailPage {
  
  public items:any = [];
  post: any;
  http: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.post = (navParams.get('post'));
  }

  getData(){
    let url = 'https://www.clinicbuzlazer.com/wp-json/wp/v2/alsp_listing?_embed';
    let data: Observable<any> = this.http.get(url);
    data.subscribe(result =>  {
      this.items = result;
    });
  }

}

Posts: 1

Participants: 1

Read full topic

Keyboard overlaps on Ion-footer

$
0
0

@aditya_1027 wrote:

Hello Experts,

I have a textarea in ion-footer and when keyboard open… textarea hide behind keyboard.

Anyone here who can help with this issue?

Posts: 1

Participants: 1

Read full topic

Master - Detail View with two responsive columns like ion-split-pane

$
0
0

@mburger81 wrote:

We try to do a responsive MASTER DETAIL VIEW in two columns, something like the ion-split-pane.

The problem is, you can not use ion-split-pane in a subpage. What we have tried is to use two divs and style them with flexbox. But on the other side there are many problems with the ion-content and the scroll behavior.

It should look like this, which is working with some workaround but the problem is also the hight of the detail view, which we have to set to an absolute value which is not good.

So my question is, how can we resolve something like this. Which is the best practice, has someone an idea or some piece of code example?

Posts: 1

Participants: 1

Read full topic

How to get device orientation correctly

$
0
0

@leonardofmed wrote:

I need to get the device orientation to make some kind of compass. I saw that the old plugin | [2] used for this is now deprecated and that is suggested to use the W3C Device Orientation API now.

I tried to use it this way:

this.window.addEventListener("deviceorientation", function(event) {
    console.log(event);
}, true);

but the main orientation values (alpha, beta and gamma) are always null. I tried to turn on the GPS, but does not change anything.

I tried other events related to changes of orientation, but these don’t even fire, I belive this is because the orientation values are always null.

this.window.addEventListener("orientationchange", (event) => {
    console.log(event, screen.orientation.angle);      				    
}, true);

this.window.onorientationchange = (event) => { 
    console.log(event, screen.orientation.angle);
};

Am I doing something wrong? Is there other easier or correct way to get these informations?

Posts: 1

Participants: 1

Read full topic

Viewing all 49526 articles
Browse latest View live


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