PDA

View Full Version : [CLOSED-204] modal overlay shading not covering full width of landscape mobile device



nosarious
7 Aug 2010, 8:33 AM
Sencha Touch version tested:

0.9 rev 3

default ext-touch.css
http://straathof.acadnet.ca/beta2.2/css/style.css




Platform tested against:

iOS 3.x
iOS 4
ipad
iphone4, ipodtouch2


Description:

If an overlay is displayed with modal:true the shading on the background will not cover the entire width of the device in lansdcape mode. This behavior does not show up on the desktop version of safari or chrome.


Test Case:



listeners: {
render: function(c){
c.body.on('doubletap', function(e, t){
//handle the double click
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
height: 200,
width: 200,
html: 'I am an overlay'
}).show();
c.doComponentLayout();
}, c);

}


See this URL : http://www.straathof.acadnet.ca/beta2.2/


Steps to reproduce the problem:

doubleclick to activate
rotate device

(can be activated before rotation or afterwards. result does not change)


The result that was expected:

entire background expected to be shaded.


The result that occurs instead:

Shaded area in background of overlay seems to be limited to registered portrait width of device.


Screenshot or Video:


http://straathof.acadnet.ca/beta2.2/screenshots/modal_portrait.jpg
http://straathof.acadnet.ca/beta2.2/screenshots/modal_landscape.jpg
http://straathof.acadnet.ca/beta2.2/screenshots/modal_landscape(ipad).jpg


Debugging already done:

none


Possible fix:

don't use modal setting for now.

evant
8 Sep 2010, 7:01 PM
I tried this on 0.94 and wasn't able to reproduce it on the ipad. Can you confirm?



Ext.setup({
onReady: function(){
new Ext.Panel({
style: 'background-color: red;',
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'overlay',
handler: function(){
new Ext.Panel({
floating: true,
modal: true,
width: 200,
height: 200,
x: 0,
y: 100,
html: 'I am a panel'
}).show();
}
}]
}]
}).show();
}
});

nosarious
8 Sep 2010, 9:29 PM
I changed only the web fonts in the css, the ext-touch.css and the new version, 0.94. The problem still persists.

You can see it here: http://straathof.acadnet.ca/beta2.2.2/

It should do the same thing on the ipad simulator.

Your example (with slight modifications to make it as similar to mine as possible, no tab bar and double-tap for menu) does not generate the same problem.
http://straathof.acadnet.ca/pincher2/


Ext.setup({

monitorOrientation: true,

onReady: function(){

var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

new Ext.Panel({
style: 'background-color: red;',
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 2
},

items: [carousel1],
listeners: {
render: function(c){
c.body.on('doubletap', function(e, t){
//handle the double click
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
height: 200,
width: 200,
html: 'I am an overlay'
}).show();
c.doComponentLayout();
}, c);

}

}
})
}
});


Could it be something to do with the css juggling I am performing to get my backgrounds and other sizings in place?

evant
8 Sep 2010, 9:56 PM
That's entirely possible. It's difficult to diagnose bugs like that because there's so many other factors, however the fact that it works in a simple test case indicates that the bug could well not be in the framework.

nosarious
9 Sep 2010, 7:15 AM
Consider it solved, then, I guess. Tha nks for looking into it. If I ever find out what is going on I'll let you guys know.