iPnone selection wheel doesn't auto-close

lannie · 2014-08-07 16:00:51 UTC

On the iPhone 5 iOS 7.0.6, the selection wheel for a element doesn’t close automatically. It seems like I should be able to spin the wheel to the selection I want and then tap it, and it should close. But I have to tap outside the wheel to get it to close … and if I tap on something else that is tappable, that opens up, and it’s a mess. Is there anything I can do to make this better?

I don’t know yet how this works on other platforms, except that my Nexus 7 tablet doesn’t generate a selection wheel, just a list. Oddly, when I load the app to my phone through the PhoneGap Developer app, the selection wheel has a nice Done link at the top right, and also forward/backward arrows at the top left that act like tabbing to subsequent input fields. I wish these controls were there when I run the actual app, that would solve the problem.

mhartington · 2014-08-07 16:07:46 UTC

If this project was made through the ionic CLI, these controls are there, just hidden by default.

In you app.js comment out the line about hiding the accesory bar.

github.com

ionic-team/ionic-app-base/blob/master/www/js/app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs).
    // The reason we default this to hidden is that native apps don't usually show an accessory bar, at
    // least on iOS. It's a dead giveaway that an app is using a Web View. However, it's sometimes
    // useful especially with forms, though we would prefer giving the user a little more room
    // to interact with the app.
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {

This file has been truncated. show original

.run(function($ionicPlatform) {
  $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.Keyboard) {
      // Commenting this out adds the accessory bar back     
      // cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // Set the statusbar to use the default style, tweak this to
      // remove the status bar on iOS or change it to use white instead of dark colors.
      StatusBar.styleDefault();
    }
  });
})

lannie · 2014-08-07 17:40:25 UTC

Wow, that was easy! Thanks!