Provide API to resize layout when keyboard opens

Often it is useful to resize the UI to fit the visible area when the keyboard opens. This makes it possible to e.g. always show a button below the selected text input when it gets focus (see example below).

This was the behavior of the Android client on Tabris.js 1.x. On 2.x, the layout is only modified when the developer drawer is opened.

On iOS, the UI is not resized when the keyboard opens. Input fields may be covered by the keyboard when it opens (reproducible in the example below).

It would be useful to unify the default behavior on both platforms and provide API to enable/disable it.

Example:

tabris.ui.contentView.append(
  new tabris.ScrollView({left: 0, top: 0, right: 0, bottom: 0}).append(
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.TextInput({left: 0, top: 'prev() 10', right: 0}),
    new tabris.Button({left: 0, top: 'prev() 10', right: 0})
  )
);

tabris.ui.contentView.find('ScrollView').first().on('resize', function(scrollView) {
  let childrenHeight = 0;
  let children = tabris.ui.contentView.find('ScrollView').first().children();
  children.forEach(child => childrenHeight += child.bounds.height + 10);
  if (childrenHeight - scrollView.bounds.height > 0) {
    scrollView.scrollToY(childrenHeight - scrollView.bounds.height);
  }
});

[mpost]

To embed your content in a ScrollView is mostly the right choice anyways since you are can not rely on a certain screen size. The usee could also activate split screen mode where your apps window would be really small.

[cookieguru]

@natanraj That’s basically the story of my life on Android–content not moving in to the viewport at all or doing so in a bizzairre way.

I’d say that the way you have it set up is the intended behavior. If you set up a page and append several tall elements to it, the last few items will get cut off on lower-resolution devices (regardless of keyboard visibility). The only way around this is to place a ScrollView on the page and append all items to that.