@jicee13 wrote:
So on Android everything looks fine, however on IOS the navbar swells quite a bit and the icons are off center. Any suggestions on how to fix this?
Posts: 1
Participants: 1
↧
IOS Navbar Swelling
↧
Datepicker Error occurred while getting date: Class not found
@scorpion3 wrote:
Hello Folks,
I am using the DatePicker as per the Ionic Native documentation however I get that error, the only difference is I want the datepicker to be available when a user clicks on an icon
Below is my html
<ion-header> <ion-navbar> <ion-row align-items-center> <!-- <ion-col col2 align-items-center> <ion-icon name="person" item-left></ion-icon> </ion-col> --> <ion-col col-12 align-items-center> <h1>Personal Details</h1> </ion-col> </ion-row> </ion-navbar> </ion-header> <ion-content padding> <ion-icon (click)="attachDatePicker()" name="calendar"></ion-icon> </ion-content>.Ts file
import { Component } from '@angular/core'; import { NavController, NavParams ,Platform} from 'ionic-angular'; import { NativeStorage } from '@ionic-native/native-storage'; import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms'; import { CustomValidtorsProvider } from '../../providers/custom-validators/custom-validators'; import { DatePicker } from '@ionic-native/date-picker'; @Component({ selector: 'personal-details', templateUrl: 'personal-details.html', }) export class PersonalDetailsPage { constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder, private datePicker : DatePicker , private platform : Platform ) { platform.ready().then(()=>{ }) } ionViewDidLoad() { } attachDatePicker() { this.datePicker.show({ date: new Date(), mode: 'date', }).then( date => console.log('Got date: ', date), err => console.log('Error occurred while getting date: ', err) ); } }I have also imported into module.ts and added datepicker into the providers: can you please point out what did I miss?
Posts: 1
Participants: 1
↧
↧
How to handle the image click in kiosk mode for ionic2 web application
@muru1778 wrote:
I am developing ionic web application where i used kiosk mode.If i click the image in my page its showing popup with options like open image,save image ,copy image.How to avoid this popup while image click
Posts: 1
Participants: 1
↧
How to Import/Declare JS File [TS Error, Cannot Find Name 'Airmap']
@OverArizona wrote:
Hi, FYI: NB to TS and Ionic and rusty with Angular!
I’m trying to use a third-party JS (no ts available) file and attempting to implement it “correctly” in Ionic - and so far without any luck.
The JS file resides in
../assets/js/airmap.map.2.2.0.min. I am trying to call on it in my**airmap.ts**as follows:import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; @IonicPage() @Component({ selector: 'page-airmap', templateUrl: 'airmap.html', }) export class AirmapPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad AirmapPage'); } ionViewWillEnter() { let config = { "airmap": { "api_key": "...." }, "auth0": { "client_id": "....", "callback_url": null }, "mapbox": { "access_token": '....' } }; let map = new Airmap.map(config, { // <---- 'Airmap' - TS ERRORs HERE -----> // container: 'airspaceMap', theme: 'standard', center: [33.238634, -111.7078655], zoom: '10', layers: ['airports_commercial', 'national_parks', 'tfrs', 'wildfires'], /* refer to the docs for a comprehensive list of options */ }); map.on('load', function() { // set layers let controlled_airspace_layers = ['class_b', 'class_c', 'class_d', 'class_e0']; map.setLayers(controlled_airspace_layers); // add Prohibited Special Use Airspace map.addLayer('sua_prohibited'); }); map.on('click', function(click) { map.move(click.lngLat.lat, click.lngLat.lng); }); } }I have tried various routes without any luck ( because I don’t know what I am doing here
) including in my
**app.module.ts**:import { Airmap } from '../assets/js/airmap.map.2.2.0.min' @NgModule({ declarations: [ MyApp, Airmap, // LoginPage, ],…And tried adding it in the
index.html. . . <!-- Ionic's root component and where the app will load --> <ion-app></ion-app> <!--Airmap--> <script src="assets/js/airmap.map.2.2.0.min.js"></script> <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> . . .So any help with steps and code examples would be greatly appreciated and will go a long ways on me learning this new and awesome framework (for me anyways). Thinx!!
) including in my Posts: 3
Participants: 2
↧
Trouble using Validators.pattern Regex to match URL
@daytonh wrote:
I am trying to create a regular expression to match a website URL for some form validation. Here is the regex I am using:
^((http|ftp|https):\/\/)?([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?$While I know that this is not a “perfect” regex for validating a URL, I am getting inconsistencies between using the regex in ionic vs. my web tests.
For example, i plugged the regex into http://www.regex101.com and several examples are working just fine:
http://www.google.com
google.com
www.google.comHowever, when I run my ionic app, none of my patterns are matching.
I know that I am using
Validators.pattern()properly because I have already added a regex validator for email inputs. I also know that I’m using it properly because I am able to plug in simple patterns, likehttpang the validation works fine.Somewhere along the way, the Ionic pattern is failing to parse as a normal regex would.
Is there something about using regex in Ionic that I am missing?
Posts: 1
Participants: 1
↧
↧
Parser Error: Unexpected token #,
@blakezeisler wrote:
I am getting an error when performing an http get call for JSON data where the JSON has a ‘#’ in the path. Everything is working and returning/displaying except for when i try to display an image where the path has ‘#’ in it.
in the JSON return below i am trying to display the image at
artist.image[3].#textHere is the JSON returned:
"artist":{ "name":"Adele", "mbid":"cc2c9c3c-b7bc-4b8b-84d8-4fbd8779e493", "url":"https://www.last.fm/music/Adele", "image":[ { "#text":"https://lastfm-img2.akamaized.net/i/u/34s/06ecd99174a97c8319aabd69c3312a32.png", "size":"small" }, { "#text":"https://lastfm-img2.akamaized.net/i/u/64s/06ecd99174a97c8319aabd69c3312a32.png", "size":"medium" }, { "#text":"https://lastfm-img2.akamaized.net/i/u/174s/06ecd99174a97c8319aabd69c3312a32.png", "size":"large" } ....This Works
<ion-list> <ion-item *ngFor="let song of songs | musicsearchfilter"> <h2>{{song?.artist}}</h2> <p>{{song?.name}}</p> </ion-item> </ion-list>BUT when I try to display the image
<img src="{{song?.image[3].#text}}">I get the following error:
Parser Error: Unexpected token #
Posts: 1
Participants: 1
↧
Iphone X bottom tab bar
@masonturpin7 wrote:
Hello, I can’t seem to find a fix for my app. On the iPhone x the Tab bar is sitting under the virtual home button is there a way to move the tab bar text to appear above the home button?
Posts: 3
Participants: 2
↧
Numeric input keyCode problem in android
@Akgul wrote:
Hello. I am trying to create an input which users can enter number 2 decimal digits after dot.
12 => true
22.3 => true
24.44 => true
24.244 => falseI am going to make instant calculation with this value so I need to restrict what user typed instantly.
<ion-input type="number" placeholder="100" [(ngModel)]="miktar" (keydown)="onMiktarChange($event)"></ion-input>I tried do this with
keyCodebut.,and-are returning the same value (229) for myion-input. Numbers values are correct. These logs are1...9 - ,.respectively.I tried to handle
.and-in string at my .ts file with different events but I get undefined. Because of thetype ="number"ionic can’t catch these characters.Then I changed my input type
numbertotextand I useregexto restrict input. This regex allows user to numbers and decimal 2 digits after one dot.const MY_REGEXP = /^[0-9]+([.]|[.][0-9]{1,2})?$/; onMiktarChange(num){ this.cdRef.detectChanges(); let regex = new RegExp(MY_REGEXP); console.log(num.keyCode); if(!regex.test(num)){ this.miktar = num.slice(0, -1); }That was working cool until I realize kind of a bug. User can’t enter alphabetic characters but input allows to these characters when I press 100 or 120 times alphabetic characters. On the other hand user can press emoji button and put emoji into the input
I did all kind of events
(keydown)(keyup)(keypress)and(ngModelChange)I don’t think that the type of the event related to this problem. I am stuck. I really appreciate if you guys give me any advice to handle that problem. Thanks
Posts: 2
Participants: 2
↧
Unable to connect to my localhost on Android Device
@drozay007 wrote:
I have an Ionic 3 app that keeps giving me the error
"Response with Status: 404 Not found for URL:http://192.168.120.30:8100/api/login".I’m also getting another error in the console that says
"SyntaxError: Unexpected token < in JSON position 0".I believe the big error is the first one since it can’t even reach my API. . 192.168.120.30 is my macbooks local IP address. I have also tried without the port :8100. I am using a Macbook laptop. My backend is Laravel running on a Homestead VM with the ip 192.168.10.1. The phone and laptop are connected to the same WIFI.
I have also tried tethering my phone with my laptop and changing the IP to the phones local IP but still no luck, I keep getting the same error.
How can I resolve this?
Posts: 1
Participants: 1
↧
↧
Overlay guiding full-screen div can not cover tab bar
@rambo1412 wrote:
css
.overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 99999;
top: 0;
left: 0;
}html :
- I am new to Ionic 3.0. I am working on a school project. I want to design a full-screen guiding div which will “float above” my main page.
- The overlay div can not cover tab bar, it seems that tab bar has the highest z-index, which means it can not be covered by anything from subpage.
- Do you guys have any experience in solving this problem.
Posts: 1
Participants: 1
↧
Ionic iframe loading error
@gaurav7618 wrote:
When I try to load api response in ionic iframe it gives me Error : Uncaught (in promise): SecurityError: Failed to execute ‘open’ on ‘Document’: Can only call open() on same-origin documents. I have searched on many forums and it says api response header should allow any origin. I have already set this line of code “header(‘Access-Control-Allow-Origin: *’);” in api. But I am still getting above error. Please help
Posts: 1
Participants: 1
↧
Authorization for Geolocation
@cityfresno wrote:
Our App, uses the location to map your position, then show’s the city buses around you. We’ve added the following to the config file:
<config-file overwrite="true" parent="NSLocationWhenInUseUsageDescription" platform="ios" target="*-Info.plist"> <string>Your current location will be displayed on the map and used for directions, nearby buses, and estimated travel times.</string> </config-file> <config-file overwrite="true" parent="NSLocationAlwaysUsageDescription" platform="ios" target="*-Info.plist"> <string>Your current location will be displayed on the map and used for directions, nearby buses, and estimated travel times.</string> </config-file>but apple keeps saying:
Thank you for the response and resubmission.
Since your app uses location services, please clearly specify why the app is requesting the user’s location in the location permission modal alert.
Please see attached screenshots for details.
What am i missing?
Posts: 1
Participants: 1
↧
Help ionic Google map Release
@guidevlins wrote:
my version app debug open maps
cordova build --release android
keytool -genkey -v -keystore minha-chave.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore minha-chave.keystore platforms/android/build/outputs/apk/android-release-unsigned.apk alias_name
and zipalign for last
my app not open google maps the map is blank nothing, i generate the keys with sha1
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID=“YOUR_ANDROID_API_KEY_IS_HERE” --variable API_KEY_FOR_IOS=“YOUR_IOS_API_KEY_IS_HERE”
$ npm install --save @ionic-native/google-maps why not it works?
Posts: 1
Participants: 1
↧
↧
Button slider ionic
@Quiesan wrote:
hi !
How can I do something like this please :
It’s a button where the arrow can slide to the right… Have you an idea please ?
Posts: 1
Participants: 1
↧
Airmap: ReferenceError: Airmap is not defined
@OverArizona wrote:
Hello,
How I can solve my problem with
Airmap is not defined? Everything that I can find on the World-Wide-Webs fails ;( What am I missing? Any help is appreciated. Thnx.The Airmap.ts:
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; declare var Airmap: any; @IonicPage() @Component({ selector: 'page-airmap', templateUrl: 'airmap.html', }) export class AirmapPage { constructor(public navCtrl: NavController, public navParams: NavParams) { // platform.ready().then(() => { // this.loadMap(); // }); } ionViewDidLoad() { console.log('ionViewDidLoad AirmapPage'); } ionViewWillEnter() { this.loadMap(); } loadMap() { let config = { "airmap": {"api_key": '<AIRMAPKEY>'}, "auth0": {"client_id": '<AIRMAPCLIENT>',"callback_url": null}, "mapbox": {"access_token": '<MAPBOXTOKEN>'} }; let map = new Airmap.Map(config, { container: 'airspaceMap', theme: 'standard', center: [33.238634, -111.7078655], zoom: '10', layers: ['airports_commercial', 'national_parks', 'tfrs', 'wildfires'], /* refer to the docs for a comprehensive list of options */ }); map.on('click', function(click) { map.move(click.lngLat.lat, click.lngLat.lng); }); } }index.html:
. . . <ion-app></ion-app> <!--Airmap--> <script src="assets/js/airmap.map.min.js"></script> <!-- The polyfills js is generated during the build process --> <script src="build/polyfills.js"></script> . . .
Posts: 1
Participants: 1
↧
Same -Origin error angular2
@manny85 wrote:
I get this
SecurityError: Failed to execute ‘open’ on ‘Document’: Can only call open() on same-origin documents.
Applied the header(‘Access-Control-Allow-Origin: *’) . but still getting the above error !
Posts: 1
Participants: 1
↧
how to solve this error and already installed 'epubjs' ?
@hnyshri wrote:
Error: Module parse failed: Unexpected character ‘#’ (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| var connect = require(‘connect’),
| colors = require(‘colors’),
at Object. (http://localhost:8100/build/vendor.js:119628:7)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.194 (http://localhost:8100/build/main.js:44:65)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.264 (http://localhost:8100/build/main.js:233:75)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.221 (http://localhost:8100/build/main.js:166:73)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.197 (http://localhost:8100/build/main.js:150:70)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
Posts: 1
Participants: 1
↧
↧
Android "Next Button" is not triggering input keypress event
@Andredatsch wrote:
Hello,
I have an input, really basic, with a keypress event:
<ion-input [formControl]=“phone” (keypress)=“phoneKeyPress($event)” [brmasker]="{mask:’(00) 00000-0000’, len:15}" type=“tel”>
and when i input any key, the event works fine, but when i press the next button, this guy:
The event is not triggered.
Anyone know how to handle this?
Posts: 1
Participants: 1
↧
Install release's apk after installed debug's apk ionic
@rashidi wrote:
I created a Ionic App and installed a debug apk of App on device.
I build a release apk of App and transfer to device and Trying to install the App but not install.
I remove debug version of device and then installing release apk be installed correctly.
how to create a release apk install on Which if the debug version is installed without remove debug version of device ?
Posts: 1
Participants: 1
↧
Wordpress with ionic issue
@flycoders_sourav wrote:
how to fetch videos from wordpress and show into my app.
How can i do that please. guide me.
Posts: 1
Participants: 1
↧
