textfield displacement after focus / keyboard shown (vbox layout + scrolled list)

**terrestris** · 18 Aug 2011 1:42 AM

Hi forum,

I have a strange but reproducible behavior with my Sencha Touch 1.1.0-code which I cannot fix myself.

I have a simple panel in fullscreen mode which contains a toolbar as dockedItem, a textfield and a list. When I scroll the list on my Google Nexus S (Android 2.3.4) and then focus the textfield, the textfield (partwise) disappears from the screen. When one then starts entering some characters into the field, the view "ditches" up and down.

I can reproduce this behaviour on the Nexus everytime, but fail to reproduce this on my Samsung Galaxy S (GT-I9000) and on iPad 2 and iPhone 4 (everything is working like a charm there).

Here is a minimal online example of the described behaviour:
http://www.webmapcenter.de/textfield-focus-scroll-bug/example.html

If you load this example on the nexus and follow these steps, you should be able to reproduce the error:

Scroll the list of names in any vertical direction
Focus the textfield by tapping into the field
(the keyboard pops up)
The layout is distorted, the textfield isn't fully visible
When you now start to sth. in the field the ditching occurs and the situation is worse

This is the full code:

example.html

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Example</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="./sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">       
        <script type="text/javascript" src="./sencha-touch-1.1.0/sencha-touch.js"></script>
        <script type="text/javascript" src="example.js"></script>
    </head>
    <body>
    </body>
</html>

example.js (http://www.webmapcenter.de/textfield...bug/example.js)

PHP Code:


// bogus datawindow.mockupData = [
    {firstName: 'Ed 1'},  {firstName: 'Tommy 1'},  {firstName: 'Aaron 1'},
    {firstName: 'Ed 2'},  {firstName: 'Tommy 2'},  {firstName: 'Aaron 2'},
    {firstName: 'Ed 3'},  {firstName: 'Tommy 3'},  {firstName: 'Aaron 3'},
    {firstName: 'Ed 4'},  {firstName: 'Tommy 4'},  {firstName: 'Aaron 4'},
    {firstName: 'Ed 5'},  {firstName: 'Tommy 5'},  {firstName: 'Aaron 5'},
    {firstName: 'Ed 6'},  {firstName: 'Tommy 6'},  {firstName: 'Aaron 6'},
    {firstName: 'Ed 7'},  {firstName: 'Tommy 7'},  {firstName: 'Aaron 7'},
    {firstName: 'Ed 8'},  {firstName: 'Tommy 8'},  {firstName: 'Aaron 8'},
    {firstName: 'Ed 9'},  {firstName: 'Tommy 9'},  {firstName: 'Aaron 9'},
    {firstName: 'Ed 10'}, {firstName: 'Tommy 10'}, {firstName: 'Aaron 10'
}];
// simple model
Ext.regModel(
    'User', {
    fields: [
        'firstName'
    ]}
);

Ext.setup({
    onReady: function(){
        var btn = new Ext.Button({
            text: 'btn'
        });
       var toolbar = new Ext.Toolbar({
            items: [
                btn
            ]
        });
       var textfield = new Ext.form.Text({
            flex: 1,
            name: 'my-textfield',
            placeHolder: 'scroll list, then focus me'
        });
       var list = new Ext.List({
            flex: 12,
            itemTpl: new Ext.XTemplate('{firstName}'),
            store: new Ext.data.Store({
                model: 'User',
                data: window.mockupData
            })
        });
       var innerPanel = new Ext.Panel({
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                textfield,
                list
            ]
        });
       var outerPanel = new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            // This is the offending configuration. Some notes:
            //   1) if I don't include dockedItems, the bug is gone
            //   2) if the dockedItems belong to the innerPanel
            //      the bug is there as well
            dockedItems: [toolbar],
            items: [innerPanel]
        });
        // for easier access to the created elements
        window.debug = {
            btn: btn,
            toolbar: toolbar,
            textfield: textfield,
            list: list,
            innerPanel: innerPanel,
            outerPanel: outerPanel
        };
    }
});

If I leave out the dockedItems, the error is gone. If I move the dockedItems from the outer to the inner panel, the bug still occurs.

It does not matter whether I instanciate the toolbar or use the xtype only.

I am out of guesses and gratefull for every hint / insight you can share.

Maybe I am missing something fundamentally or create the desired layout in too complicated way. Please tell me if this can be simplified.

Some images of the problem in the Nexus in case you do not own that particular device (sorry for the poor quality):

Initial layout, everything is ok:
initial-load.jpg

After the list was scrolled and the field got focus:
after-textfield-focus.jpg

After one typed somthing in the field:
after-typing-in-textfield.jpg

Thanks in advance and best regards,
Marc

jjerome

try adding a 'fit layout to the innerPanel too. I didn't realize that didn't have a layout.

Why do you use an inner AND outer panel?
I understand the inner is the wrapper panel for the list, but why use an outer one?
Couldn't you just dock the toolbar in the innerPanel?

**jjerome** · 18 Aug 2011 5:55 AM

Could it be the flexes you set to the toolbar and list? Maybe when the keyboard comes up the window resizes and the flex properties will cause the components to resize dramatically. You shouldn't need those anyway. The 'fit' layout should take care of it for you (I believe it would look the same).

I've noticed this problem happen to me quite often..

**terrestris** · 18 Aug 2011 6:47 AM

Originally Posted by jjerome

Could it be the flexes you set to the toolbar and list? Maybe when the keyboard comes up the window resizes and the flex properties will cause the components to resize dramatically. You shouldn't need those anyway. The 'fit' layout should take care of it for you (I believe it would look the same).

Hi jjerome,
thanks for the feedback.

Yes, if I remove both

PHP Code:


layout: {
    type: 'vbox',
    align: 'stretch'
}

and the flex-configurations, the displacement isn't happening and everything look neat at first sight, BUT the list of names isn't scrollable in a reasonable way: see http://www.webmapcenter.de/textfield-focus-scroll-bug/example2.html

So sadly this doesn't seem to be an option for me. Or can I make the bottom list scrollable by a certain configuration?

Thanks in any case,
Marc

**jjerome** · 18 Aug 2011 6:57 AM

add a 'fit' layout to the list. that should fix it

**terrestris** · 18 Aug 2011 7:04 AM

Sorry, that didn't work, I updated the http://www.webmapcenter.de/textfield.../example2.html example with layout: 'fit' but still the scrolling in the list is somewhat broken. More ideas of how to get back the original scrolling behaviour?

**jjerome** · 18 Aug 2011 7:16 AM

try adding a 'fit layout to the innerPanel too. I didn't realize that didn't have a layout.

Why do you use an inner AND outer panel?
I understand the inner is the wrapper panel for the list, but why use an outer one?
Couldn't you just dock the toolbar in the innerPanel?

**terrestris** · 18 Aug 2011 11:02 PM

Hi jjerome,

Thanks a lot. That was indeed the missing piece.

One oddity though: only adding layout: 'fit' did not do the trick I also had to swap the position of the textfield and the list in the innerPanel. The relevant code now reads:

PHP Code:


var innerPanel = new Ext.Panel({
    layout: 'fit',
    items: [
        list,
        textfield
    ]
});

Visually they appear with the textfield above the list in the Nexus, iPad 2 and iPhone 3GS though.

As far as I can tell you solved this issue, so thanks a lot!

textfield displacement after focus / keyboard shown (vbox layout + scrolled list)

Thread Tools

Search Thread

Display

Answered: textfield displacement after focus / keyboard shown (vbox layout + scrolled list)

Answered: textfield displacement after focus / keyboard shown (vbox layout + scrolled list)

Tags for this Thread