CODEWITHSUNDEEP
dojokeyboardios7ibm-mobilefirstdojox.mobile
Chris La Pat
Chris La Pat

Reputation: 35

Worklight 6.0.0.1 and iOS 7 Keyboard

I'm using Worklight 6.0.0.1 Enterprise Edition and updating an existing app to work with iOS7. The application is built on Dojo and specifically is making use of the dojox/app framework.

One issue is causing me a lot of difficulty, namely the keyboard. In our application some of the views have input text fields. In prior versions of iOS when a user clicks in a text field the view is scrolled up to show the input that is in focus while the user types.

In iOS 7 the keyboard just appears on screen. The view is not scrolled upward and if the input field is toward the bottom of the screen it is covered over by the keyboard. To make matters worse, if the keyboard covers a field it loses focus, meaning that all fields near the bottom of the screen cannot be manipulated. One workaround I discovered is to set the height in the meta tag:

<meta content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

This works well until I change to landscape orientation on the device. When I open and close the keyboard in portrait mode the screen does not re-adjust back to the correct size and the dojox/mobile/ScrollableView (containing all of the content) remains pushed upward. There is a blank panel underneath where the keyboard was.

Thinking that it may be something to do with our application I attempted a test with a new Worklight application. I created a new project and added some text in the body of the main HTML file along with an input text field at the bottom. The result was similar to the scenario above. In this case the view is pushed upward and the dojox/mobile/ScrollableView that contains the content is pushed up too far. There is a blank panel between the scrollable view and the keyboard.

I have seen a number of keyboard and scrolling related threads including suggestions to configure the settings in config.xml: KeyboardShrinksView, HideKeyboardFormAcccessoryBar, and DisallowOverscroll. None of these have solved the problems.

Unfortunately I cannot post screenshots to show you exactly what I'm seeing (not enough reputation points), but here is the body of the very simple test application I mentioned above:

<body id="content" style="display: none;">
    <div data-dojo-props="selected:true" data-dojo-type="dojox.mobile.ScrollableView" id="view0">
            <!--application UI goes here-->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            <input data-dojo-type="dojox/mobile/TextBox"></input>
        </div>
    <script src="js/initOptions.js"></script>
        <script src="js/KeyboardTest.js"></script>
        <script src="js/messages.js"></script>
</body>

I'd greatly appreciate any suggestions or nods in the right direction.

Thanks, Chris

Upvotes: 1

Views: 717

Answers (1)

Adrian Vasiliu
Adrian Vasiliu

Reputation: 396

EDIT: this answer holds for Cordova 3.1 and Dojo 1.9.1+.

In my second round of experiments and tests with Cordova 3.1 on iPhone and iPad under iOS 7, the following did the trick:

Do not define height: device-height in the meta tag, while adding to your input elements (not necessarily Dojo widgets) a listener for "click" events, say

<input onclick="onInputClick(event);" data-dojo-type="dojox/mobile/TextBox">

or

<input onclick="onInputClick(event);">

and define the function as follows:

onInputClick = function(e){
    e.target.focus();
};

Explanation and some remarks:

  • When height:device-height is not present in the meta tag, there is no "focus" event when you tap an input field (adding the device-height fixes that, but creates the side-effect in landscape orientation). Differently, when navigating from an input field to another using the previous/next arrows on the top of the keyboard, the focus event is emitted.
  • The focus event is used by the Dojo mobile scrollable container to adjust the scrolling such that that the field is visible once the keyboard is shown. Since there's no focus event when taping the input field, this adjustment is not done...
  • Note that the Cordova 3.1 documentation states: "iOS 7 issues: Remove the values "width=device-width, height=device-height" from your meta tag "viewport" attribute' (http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS). From that it would seem that not using height:device-height is anyway recommended by Cordova. However, ​https://issues.apache.org/jira/browse/CB-4862 seems to imply that height:device-height should be set for iOS 7... Definitely, the changes introduced by iOS 7 are still producing much pain.
  • For Dojo Mobile, the issue is tracked in https://bugs.dojotoolkit.org/ticket/17505.

Upvotes: 1

Related Questions