PDA

View Full Version : Margin bug shrinks panel width but happens only in portrait mode (not in landscape)



Ayame
22 Sep 2011, 3:25 AM
Sencha Touch version tested:

1.1.0


only default ext-all.css
custom css (which causes the problem listed below)







Platform tested against:

iOS 4.2 iPad (simulator and device)



Description:

When nesting three panels in given configuration (required for a certain layout type for iPad) the text in the inner most div (a nested div generated by sencha) shrinks, but this only happens in portrait mode. When starting the simulator or device in landscape mode the bug does not appear.
When removing the margin to create the right aligned layout, the bug does not happen, but the content is not where it is required.



Test Case:




<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="assets/css/sencha-touch.css" />


<script type="text/javascript" charset="utf-8" src="assets/js/sencha-touch-debug-w-comments.js"></script>


<script type="text/javascript">
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Actions


var ShowMessages = function(){
var data = [];
var i=0;
for(i=0; i<30 ; i++){
data.push({
'message': "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet lacinia nisi. Maecenas posuere aliquet mattis. Proin tincidunt ante id justo iaculis seros pellentesque ut. Vestibulum ultricies, lorem quis congue pellentesque, enim velit interdum nulla, non elementum tellus"+ i
});
}
messages.update(data);
}


var messages = new Ext.Panel({
cls: "message-list",
title: 'List',
id: 'messages',
scroll: 'vertical',
layout: 'auto',
height: 500,
width: 500,
tpl: [
'<tpl for=".">',
'<div class="message">{message}</div>',
'</tpl>'
]
});


var panel = new Ext.Panel({
cls: 'test2',

items: [messages]
});


var panel2 = new Ext.Panel({
layout: 'fit',
fullscreen: true,
cls: 'test',
items: [panel]
});
ShowMessages();


}
});
</script>
<style type="text/css">
.message-list {background-color: red;margin-left: auto; margin-right: 0;}
.test {background-color: blue;}
.test2 {background-color: green;}


</style>
</head>
<body>
</body>
</html>





Steps to reproduce the problem:

insert code above
put simulator in portrait



The result that was expected:
28243


The result that occurs instead:
28244



content is smaller than supposed to be



Debugging already done:

does not appear on landscape mode
bug does not occur when leaving out custom margin code, but then desired location of panel is wrong



Possible fix:

not provided

Ayame
13 Oct 2011, 11:56 AM
Has anyone from the staff already had a chance to look at this bug? It's rather cropping up my application..

Thank you