Results 1 to 8 of 8

Thread: Readonly textfield tabover adds blank space at the bottom of the screen

  1. #1
    Sencha User
    Join Date
    Jan 2015
    Posts
    5

    Default Readonly textfield tabover adds blank space at the bottom of the screen

    We have a form panel with a number of textfields and select/dropdown fields. There is only one readonly and disabled text field. Whenever we use the 'Next' soft key and move to the field after the readonly textfield, blank space is added to the end of the screen and we are unable to scroll to the top of the form, thereafter. If we change the readonly textfield to a normal textfield, everything works fine.

    Any help is appreciated. Thanks in advance!

    Sencha Touch version 2.3.1

    Regards

  2. #2
    Sencha Premium User
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    I'd like to test this along with you. Can you post a simple test case either inline here or at https://fiddle.sencha.com?


    Regards,
    Brian

  3. #3
    Sencha User
    Join Date
    Jan 2015
    Posts
    5

    Default

    Hi Brian,Here is the sample code we have

    Code:
    Ext.define('MyView', {    extend: 'Ext.Container',    xtype: 'myViewType',    requires: [ 'Ext.TitleBar', 'Ext.form.Panel', 'Ext.form.FieldSet'],    config : {        itemId: 'sampleview',        layout: 'vbox',                fullscreen: true,        defaults: {            margin: 10        }    },        initialize: function() {                var title = "Title";        var titlebar = Ext.create('Ext.TitleBar', {            itemId:'titleBar',            title: title,            docked: 'top',            items: [                {                    xtype: 'button',                    align: 'left',                    name:'backBtn',                    text: "Back"                                    },                {                    align: 'right',                    name:'saveButton',                    xtype:'button',                    text:"Save"                }            ]        });         var header = Ext.create('Ext.Panel', {                        itemId:'header',            docked: 'top',            layout: 'vbox',            items:[ titlebar ]        });        var myPanel = Ext.create('Ext.form.Panel', {            name:'myForm',                    height:'96%',            scrollable:true,            defaults: {                padding:'5px'            },            items: [                {                    xtype: 'textfield',                    label: "Firstname",                    labelWidth:'100%',                                        name: 'firstname',                    clearIcon: false                                   },                {                    xtype: 'textfield',                    label: "Lastname",                    labelWidth:'100%',                                    name: 'lastname',                    clearIcon: false                },                {                    xtype: 'textfield',                    label: "email",                    labelWidth:'100%',                                        name: 'email',                    clearIcon: false                },                {                    xtype: 'textfield',                    label: "Other Email",                    labelWidth:'100%',                                    name: 'emailOther',                    readOnly:true,                    clearIcon: false                },                                {                    xtype: 'textfield',                    label: "Address",                    labelWidth:'100%',                                        name: 'address1',                    clearIcon: false                                 }                            ]        });        this.add([header, myPanel]);            } // EOC});

    Code:
    Ext.define('MyController',{        config: {                refs:{                        backBtn : 'myViewType button[name=backBtn]',            editProfileForm : 'myViewType panel[name=myForm]',            saveButton:'myViewType button[name="saveButton"]',            emailOther:'myViewType textfield[name=emailOther]',        },                control: {                               }    },        initialize: function(){        this.getEmailOther().setDisabled(true);            }     });
    Steps to reproduce bug: 1) Tap on First name and using "Next" soft key move to last name2) Scroll to the bottom ; no extra space is seen and scrolling to the top of the form is also possible.3) Repeat the above process and once the focus is on the "Email Other" field, scrolling to the top is not possible and when scrolled to the bottom, there is a blank space (proportional to the height of the readonly field )

  4. #4
    Sencha Premium User
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    Are you experiencing these issues on a specific device? How are you testing this code?

    When I try and work with the provided code, a few modifications were needed. I had to set the labelWidth value to '40%', otherwise the input area of the fields was not at all accessible so I could not set focus to the Firstname field.

    I am not seeing any odd behavior when testing this in Fiddle on a desktop browser, or when using the preview link on iOS 8.1 Safari.

    https://fiddle.sencha.com/fiddle/g7v/preview

    Regards,
    Brian


  5. #5
    Sencha User
    Join Date
    Jan 2015
    Posts
    5

    Default

    Hi Brian,

    Thanks for the response! We see this issue on an Android device (version 4.1.2) - Samsung and not on the desktop browser or other Android devices. Also, we have set the labelWidth value to 100%.

    Regards

  6. #6
    Sencha Premium User
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    With the labelWidth set to 100%, how do you activate the keyboard to enter any values?

    Regards,
    Brian

  7. #7
    Sencha User
    Join Date
    Jan 2015
    Posts
    5

    Default

    We have override.js which overrides all textfields and onFocus, we call "cordova.plugins.Keyboard.show()"

    Regards

  8. #8
    Sencha Premium User
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    Please provide a simple test case (without overrides) either inline here or at https://fiddle.sencha.com that will reproduce the issue.


    Regards,
    Brian

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •