PDA

View Full Version : iPhone/iPad invisible space in bottom when page height > Apple device screen height



amitgin
20 Dec 2011, 5:00 AM
I have a normal form based page, and its contains are some textfields, checkboxes, and textarea.

In this form the last field is textarea, when we type here after 5th line the cursor goes to invisible area.

I am using here sencha touch 1.x,



Ext.setup({ icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
var dockedItems = [{
dock: 'top',
xtype: 'toolbar',
title: 'ABC',
items: []
}];




var incReport = new Ext.Panel({
width: Ext.is.Phone ? 300 : 688,
items:[{
xtype:'panel',
html:'abc'
},{
xtype:'form',
defaults:{labelWidth:'45%'},
id : 'incReport',
items:[{
xtype:'datepickerfield',
label : 'Date',
picker : { yearFrom: 2011 },
value : {
day : (new Date().getDate()),
month : (new Date().getMonth()+1),
year : (new Date().getFullYear())
}
},{
xtype:'datepickerfield',
label : 'Date',
picker : { yearFrom: 2011 },
value : {
day : (new Date().getDate()),
month : (new Date().getMonth()+1),
year : (new Date().getFullYear())
}
},{
xtype: 'textfield',
label: 'Client'
},{
xtype : 'textfield',
label : 'Location ID'
},{
xtype : 'textfield',
label : 'Phone'
},{
xtype : 'textfield',
label : 'Location'
},{
xtype : 'textfield',
label : 'Address'
},{
xtype : 'textfield',
label : 'Contact Name'
},{
xtype:'panel',
html:'abc'
},{
xtype:'checkboxfield',
label : 'Incident (Civil)'
},{
xtype:'checkboxfield',
label : 'Incident (Citation Issued)'
},{
xtype:'checkboxfield',
label : 'Information Only'
},{
xtype:'checkboxfield',
label : 'Other'
},{
xtype:'checkboxfield',
label : 'PSI Case'
},{
xtype:'checkboxfield',
label : 'Police Case'
},{
xtype:'checkboxfield',
label : 'Incident Arrest'
},{
xtype:'textfield',
label : 'Incident Type'
},{
xtype:'panel',
html:'abc'
},{
xtype :'textfield',
label : 'Reporting Officer'
},{
xtype:'textareafield',
label : 'Narration'
},{
xtype:'panel',
height:Ext.is.Phone ? 10 : 10
},{
xtype:'panel',
layout : {type:'hbox',align:'center'},
defaults : {xtype:'button', flex: 1, ui:'confirm'},
items:[{
text : 'Cancel'
},{
text : 'Submit'
}]
}]
}]
});

incReportMainPnl = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'center'
},
dockedItems: dockedItems,
items:[incReport]
});
incReportMainPnl.show();
}
});

mitchellsimoens
20 Dec 2011, 5:04 AM
This looks to be the cause of an event being captured. This works in Chrome but not on my iPad.

amitgin
20 Dec 2011, 5:14 AM
Thanks Mitchell Simoens,

I got same issue in kitchen sink , open kitchen sink in your iPhone,

go to user interface > form >

type in text area after 5th line press "Enter" and type anything then press enter this is same issue.