Results 1 to 2 of 2

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Vote Rating

    Exclamation Margin bug shrinks panel width but happens only in portrait mode (not in landscape)

    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)

    • 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>
        <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">
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            // Actions
            var ShowMessages = function(){
                var data = [];
                var i=0;
                for(i=0; i<30 ; i++){
                        '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
            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>',
            var panel = new Ext.Panel({
                cls: 'test2',
                items: [messages]
            var panel2 = new Ext.Panel({
                layout: 'fit',
                fullscreen: true,
                cls: 'test',
                items: [panel]
        <style type="text/css">
            .message-list {background-color: red;margin-left: auto; margin-right: 0;}
            .test {background-color: blue;}
            .test2 {background-color: green;}

    Steps to reproduce the problem:
    • insert code above
    • put simulator in portrait

    The result that was expected:

    The result that occurs instead:

    • 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

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Vote Rating


    Has anyone from the staff already had a chance to look at this bug? It's rather cropping up my application..

    Thank you

Posting Permissions

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