CODEWITHSUNDEEP
angularjscordovaionic-frameworkngcordova
Ted
Ted

Reputation: 23746

How to show accessory input toolbar using forms in ionicframework?

This is from the docs enter image description here

This is my code and output enter image description here

What should be added to show the toolbar with done button?

Upvotes: 1

Views: 904

Answers (2)

Gajotres
Gajotres

Reputation: 57309

To be able to see the Done button, you will need to download Cordova keyboard plugin: http://ngcordova.com/docs/plugins/keyboard/

Then use this line:

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

Something like this:

module.controller('MyCtrl', function($scope, $cordovaKeyboard) {

  $cordovaKeyboard.hideAccessoryBar(false)

});

This example will work only if you include ngCordova to your Ionic project.

More information can be found here: https://github.com/driftyco/ionic-plugin-keyboard

Keyboard.hideKeyboardAccessoryBar Hide the keyboard accessory bar with the next, previous and done buttons.

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

Precisely the buttons you can see on a top image.

Upvotes: 1

Jess Patton
Jess Patton

Reputation: 2486

I think it may have to be a form...so our app shows the word done in the toolbar and this is what our code looks like. I don't know for sure but I am guessing the done button shows up when there is a form to be submitted. Give it a go and let me know.

<form ng-submit="authenticate(user)" name="loginform" id="loginform">
                <div class="list has-header padding">
                    <div style="height: 48px;" class="item item-input">
                        <input type="text" placeholder="Username" ng-model="user.username">
                        <i class="icon ion-close-circled padding" ng-if="user.username.length" ng-click="resetUsername()"></i>
                    </div>
                    <div style="height: 48px;" class="item item-input">
                        <input type="password" placeholder="Password" ng-model="user.password">
                        <i class="icon ion-close-circled padding" ng-if="user.password.length" ng-click="resetPassword()"></i>
                    </div>
                </div>
                <div style="text-align: center;">
                    <button type="submit" class=" login button button-full button-positive">Login</button>
                </div>
            </form>

Upvotes: 0

Related Questions