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:


Code:
    <!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:
correct.jpg


The result that occurs instead:
wrong.jpg

  • 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