In ios I can not select a dropdown option? - ionic-framework

My code is done in ionic1.
my code works perfect for android but for ios I can not select any option of my dropdown, I have read solutions like this:
"Ok" button not appearing in <select> tag on Ionic App
but it does not work for me. What I can do? This is my code:
<div class="form-group mt-4">
<label for="exampleFormControlSelect1">Departamento</label>
<select class="form-control select_custom select_custom_set" ng-model="selectDepartamento" ng-options="item as item.Nombre for item in aDepartamentos | orderBy:'Nombre' track by item.Codigo" ng-change="fn_updateMun(selectDepartamento)" name="selectDepartamento" required>
<option value="" style="display:none;">Seleccione departamento</option>
</select>
</div>
And this is my configuration:
com.googlemaps.ios 2.7.0 "Google Maps SDK for iOS"
cordova-android-play-services-gradle-release 1.4.2 "cordova-android-play-
services-gradle-release"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-facebook4 2.1.0 "Facebook Connect"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.3.6 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-request-location-accuracy 2.2.3 "Request Location Accuracy"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova.plugins.diagnostic 4.0.8 "Diagnostic"
My current code:
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar
//above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins &&
window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})

Looks like for the new cordova-plugin-ionic-keyboard plugin you need to do this to show the keyboard options.
Keyboard.hideFormAccessoryBar(false);
Check the documentation for this plugin.

Related

Property 'iOSExternalAccessory' does not exist on type 'CordovaPlugins'

I have created a new Ionic 4 menu template app and then I have installed the following plugin with deps. using the CLI command
ionic cordova add https://github.com/stevef51/cordova-ios-external-accessories
However when I try ionic cordova prepare ios, I am presented the following error.
ERROR in src/app/home/home.page.ts:25:39 - error TS2339: Property 'iOSExternalAccessory' does not exist on type 'CordovaPlugins'.
25 var pluginAPI = cordova.plugins.iOSExternalAccessory;
~~~~~~~~~~~~~~~~~~~~
[ERROR] An error occurred while running subprocess ng.
When I run the command
ionic cordova plugin list, I can see it installed
com.virtualmgr.iOSExternalAccessory 1.0.0 "iOSExternalAccessory"
cordova-plugin-ble-central 1.2.2 "BLE"
cordova-plugin-bluetooth-serial 0.4.7 "Bluetooth Serial"
cordova-plugin-bluetoothle 4.5.5 "Bluetooth LE"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
The code is dead simple: a click event, if I take it out the BLE code works just fine, however I am forced to use this plugin as the handheld scanner I am using does not support BLE as it does not show up in the list of accessories when I scan for BLE devices.
scanForDevices(){
var pluginAPI = cordova.plugins.iOSExternalAccessory;
this.ble.scan([], 5).subscribe(device => {
console.log(JSON.stringify(device));
});
}
I have made contact with the developer of the plugin, he has no Ionic experience, unfortunately.
Any and all advice would be appreciated.
I have worked it out.
I was missing the declare let cordova: any; at the top of my file.

Ionic Thumbnail List render incorrectly

I use ionic thumbnail list like the document said:
```
<ion-item>
<ion-thumbnail item-start>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>
```
I copied same code to my project, when it didn't render correctly.
My list view show like belwo:
And i checked the html ion-item and ion-thumbnail generate is
It doesn't like ionic example. the ion-thumbnail directive incorrectly wrapped by ion-label.
I don't know what happen, below is my ionic info
```
cli packages:
#ionic/cli-plugin-cordova : 1.5.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-cordova)
#ionic/cli-plugin-ionic-angular : 1.4.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-plugin-ionic-angular)
#ionic/cli-utils : 1.6.0 (/Applications/My-Project/sharemap/node_modules/#ionic/cli-utils)
ionic (Ionic CLI) : 3.6.0 (/Applications/My-Project/sharemap/node_modules/ionic)
global packages:
Cordova CLI : 6.4.0
local packages:
#ionic/app-scripts : 1.3.0
Cordova Platforms : none
Ionic Framework : ionic-angular 3.0.1
System:
Android SDK Tools : 26.0.2
Node : v6.10.1
OS : macOS Sierra
Xcode : Xcode 8.3 Build version 8E162
ios-deploy : 1.8.1
ios-sim : 5.0.6
npm : 3.10.3
```
What's wrong with my code?
i found the solution:
I change the item-start directive to item-left, then problem solved.
i don't why this directive not work like Ionic Document said.
And I also found that item-end not work like document either. You need to change to item-right.
The right code is below:
<ion-item>
<ion-thumbnail item-left>
<img src="assets/img/thumbnail-totoro.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
<button ion-button clear item-end>View</button>
</ion-item>

Ionic camera plugin getPicture ignored

This is freaking me. I have a simple app where you press a button and it take a picture, then the user can do other stuff but the problem is that sometime the getPicture function is ignored and camera never shows, here goes some info and simple code:
$ ionic info
Your system information:
Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.2 Build version 8E2002
Installed platforms:
android 6.0.0
ios 4.3.1
plugins installed
$ ionic plugin ls
WARN: ionic.project has been renamed to ionic.config.json, please rename it.
com.googlemaps.ios 2.1.1 "Google Maps SDK for iOS"
cordova-plugin-camera 2.4.0 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-file 4.3.1 "File"
cordova-plugin-file-transfer 1.6.1 "File Transfer"
cordova-plugin-geolocation 2.4.2 "Geolocation"
cordova-plugin-googlemaps 1.4.0 "phonegap-googlemaps-plugin"
cordova-plugin-screen-orientation 1.4.2 "Screen Orientation"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
Then we have a HTML with this button
<button class="button button-full button-positive" ng-click="take_picture()">Take photo</button>
And the function into the controller
$scope.take_picture = function()
{
screen.lockOrientation('portrait');
var options = {
quality: 25,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
saveToPhotoAlbum: false,
correctOrientation: true,
allowEdit: false,
targetHeight: 200,
targetwidth: 200
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
$scope.image_uri = imageURI;
$scope.marcar_gps();
$cordovaCamera.cleanup();
}, function(err) {
console.log('error ',err);
$cordovaCamera.cleanup();
$ionicLoading.hide();
});
};
Hope someone can help.
Best!
EDIT
When camera is skipped on xCode console I get this:
Warning: Attempt to present on which is already presenting
Avoid using DATA_URL destinationType and replace it with FILE_URI as it may consume so much memory on the old phones. When you're using FILE_URI as destinationType, you can use cordova file plugin to transfer image to the external/internal storage, then you can call the image src link to your local device url.
EDIT
camera plugin and orientation plugin wasn't up to date. So need it to update from versions 2.4.0 "Camera" and 1.4.2 "Screen Orientation" to 2.4.1 "Camera" and 2.0.1 "Screen Orientation"

Ionic StatusBar undefined. Default is coming light

I am trying to get the default StatusBar which is black, but it's coming light. When I try to set as black the error is Uncaught ReferenceError: StatusBar is not defined including the plugin on https://github.com/apache/cordova-plugin-statusbar.git.
I removed and added several times, but the StatusBar is still light.
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.1 "Device"
cordova-plugin-file 4.1.0 "File"
cordova-plugin-media 2.1.0 "Media"
cordova-plugin-splashscreen 3.1.0 "Splashscreen"
cordova-plugin-statusbar 2.1.0 "StatusBar"
cordova-plugin-vibration 2.1.0 "Vibration"
cordova-plugin-whitelist 1.2.1 "Whitelist"
ionic-plugin-keyboard 1.0.8 "Keyboard"
The code is:
console.log(StatusBar);
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
You need to wait for the deviceready event to be able to use Cordova plugins.
The simplest way to do this would be to wrap your code in a ionic.Platform.ready() call, like this:
ionic.Platform.ready(function() {
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
I faced exactly the same problem.
just delete the platform,
and delete all plugins.
clean your project
then add your plugins again,
then add the platform again.
compile and run.
ensure also that you delete manually the plugins folder from your projects after deleting you plugins using cordova plugin rm <PLUGIN NAME>.
Tell me if it worked with you. Happy Coding.

Ionic state change issues on iOS 9 post version update to 1.1.1

Confirming that i have updated Ionic to 1.1.1, so assuming the iOS9 webview patch is included in it. However, i am still facing issues with side menus onclick of which i am invoking $state.go() which does not render the actual page & reverts to original state. UI is completely broken.
Below is the system information:
Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.1.1
Ionic CLI Version: 1.7.10
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.3
ios-sim version: 5.0.3
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.1.1 Build version 7B1005
HTML Code in the side menus:
<ion-item menu-close href="#" ng-click="getWishlist()" ng-if="userId && userId != ''">
<div class="row">
<div class="col col-20">
<i class="ion-heart"></i>
</div>
<div class="col col-80">
My Wishlist
</div>
</div>
</ion-item>
JS Code in getWishlist():
$scope.getWishlist = function (){
$state.go("app.wishlist", {}, {reload: true});
}
Help appreciated!
Note: Static URL invocations within menu seem to work just fine!
<ion-item nav-clear menu-close href="#/app/contact-us" >
<div class="row">
<div class="col col-20">
<i class="ion-ios-telephone"></i>
</div>
<div class="col col-80">Contact Us
</div>
</div>
</ion-item>
Well, i guess it was my bad for not reading this post properly!
I figured the issue was due to href='#'. The post does mention to remove empty href links if necessary which invoke the otherwise state in iOS 9. Once i removed them the links started to work as expected.
However, i still had to alter my CSS to make the side menus look proper.