Alternate for Ionic keyboard-attach directive?

The keyboard plugin provides a keyboard-attach directive to attach a footer bar to a device keyboard. The problem is that this requires the content scroll to be disabled or else the footer bar will float all over the place.

What I need is a modal that has a keyboard accessory bar that attaches itself to the keyboard but the content of the modal is allowed to scroll. How can this be accomplished?

<div class="modal">
  <ion-header-bar></ion-header-bar>
  <ion-content scroll="true">
    <!-- stuff here that user wants to scroll through -->
  </ion-content>
  <ion-footer-bar keyboard-attach">
    <!-- this is my custom keyboard accessory bar with a camera icon and other stuff -->
  </ion-footer-bar>
</div>

Is there another way to attach an accessory bar to a keyboard in Ionic (or cordova or angular) allowing the content to scroll ?

1 Like

Keyboard attach actually doesn’t require you to disable scrolling

http://ionicframework.com/docs/api/directive/keyboardAttach/

If you’re talking about setting cordova.plugins.Keyboard.disableScroll(true), then there’s some confusion.

This doesn’t disable scrolling on the entire app, but rather on the out native webview. so that way when the keyboard is shown, it doesn’t push the header bar out of the view.

I’m also facing this issue. Did you make any breakthrough with this lilbiscuit?

Yup that’s the problem. We have to set cordova.plugins.Keyboard.disableScroll(true).

From the docs:

On iOS, if there is an input in your footer, you will need to set
cordova.plugins.Keyboard.disableScroll(true).

A common use case would be a modal that is used to send a message and a photo.

When attaching a photo to the modal, if the photo is the full width of the app, we’d want to be able to scroll up and down to see the entire photo before sending. If you have scroll enabled, you can’t utilize the keyboard-attach directive because the attached element will be pushed to the bottom of the modal. Conversely, if you disable scroll, you can’t see the entire photo.

So what is desired is a keyboard attach directive that actually attaches an element to the keyboard, regardless of scroll condition.

Again, there seems to be some confusion.

cordova.plugins.Keyboard.disableScroll(true) does not disable scrolling inside of ion-content.

Rather, it disables the scrolling that could could be be happening between the app shell, and the ui-webview when the keyboard is opened.

So for your use case, when you open the modal, you’ll be able to scroll the ion-content, but when the keyboard is shown, the the entire app UIwebview won’t scroll.

OK, to eliminate some of the confusion, let’s forget about the cordova.plugins.Keyboard.disableScroll() setting for a minute.

If I do this in the modal:

<ion-content scroll="true">
  <img />
</ion-content>

… the content scrolls (good), the header is fixed (good), but the accessory bar/element floats …it is not attached to the keyboard (not good).

The desired behavior for the accessory bar/element is:

  1. Attached to the keyboard if the keyboard is open
  2. Fixed as a footer if keyboard is not open

Seems like basic native behavior, but I can’t make it work.

Thoughts?

hmm, this seems to be working fine in my tests


The issue that we are seeing is in the way that the keyboard opens. The input and the keyboard move independently of each other. The input jumps but the keyboard slides open. They finish in the correct positions but the transition looks messy.

We are using
cordova.plugins.Keyboard.disableScroll(true);
and

Did you find a solution to the messy transition?