Keyboard Avoiding View

Content Type: Widget
Categories: Mobile

Overview

Move the content of your native app up when you open a keyboard and prevent the use of scrollviews to achieve this! This widget lets you add your content into it and with some configuration it will prevent the keyboard of a smartphone to overlap the widgets content.

Documentation

Description

Move the content of your native app up when you open a keyboard and prevent the use of scrollviews to achieve this! This widget lets you add your content into it and with some configuration it will prevent the keyboard of a smartphone to overlap the widgets content.

Typical usage scenario

A view with buttons at the bottom of the page and when you open up the keyboard the keyboard overlaps these buttons. Or maybe you want to move up all the content or some images when working on small screens. Currently you can implement this when you have a scrollview but this might not be the right UX solution since you can still drag the scrollview even if there is nothing to scroll.

Features and limitations

You need to tinker around with the Keyboard Offset values for iOS and Android since depending on the layout (with or without nav bar) the offset to the keyboard might differ.

Limitations:

  • Don't add text boxes or text areas inside of the widget as Mendix already has its own mechanism in place to move the content when a keyboard is present

Dependencies 

  • Mendix Studio 8.8.0
  • Native app

Installation

Drag the widget into the page and add the content you want to move with the keyboard inside of it.

Configuration

Depending on the result play around with the Offset Bottom values to make sure you have the desired result.

Releases

Version: 1.0.0
Framework Version: 8.8.0
Release Notes: First upload of the KeyboardAvoidingView widget for Mendix Native