Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default '<img>' height is ignored inside a list's item

    '<img>' height is ignored inside a list's item


    REQUIRED INFORMATION


    Ext version tested:
    • sencha-touch-2.1
    Browser versions tested against:
    • Android 4.0.3 native Application
    • Chrome
    Description:
    • On Android, an '<img>' height is ignored inside a list's item. This is causing the next list item to appear on top of it.
    • On Chrome, the same issue appears on the first time index HTML is loaded, and the issue is being fixed by itself after a few seconds. Sequencing loads afterwards, don't show any issue.
    Screenshot_2012-12-27-13-15-01.jpg
    Steps to reproduce the problem:
    • Define a "Ext.dataview.List" with the following itemTpl config:
      Code:
      // "Ext.dataview.List" code.....
      itemTpl: [        
      '<tpl for=".">',
          '<li style="border: 2px solid red; margin: 1% 5% 7% 5% !important; padding-bottom: 2em; background-color: white; color: black !important; padding: 2%;">',
              '<div>This is a title:</div>',
              '<div>',
                  //add some content
                  '<div>',
                      '<h4>some content, line 1</h4>',
                      '<h4>some content, line 2</h4>',
                  '</div>',
                  // add an image
                  '<div style="margin-top:1em; margin-bottom:1em;">',
                      '<img style="display:block; margin-left: auto; margin-right: auto; max-width: 80% !important;" src="https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1354866075.jpg"/>',
                  '</div>',
              '</div>',
          '</li>',
      '</tpl>'
      ]
    The result that was expected:
    • Image size is calculated as if it was any other type of content. List items don't overlap each other.
    The result that occurs instead:
    • The image height is being ignored, which leads to a list of items that appear on top of each other.
    Possible fix:
    • Adding an explicit 'height' style configuration to an image solves the issue.
      Code:
      '<img style="height: 160px; display:block; margin-left: auto; margin-right: auto; max-width: 80% !important;" src="https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1354866075.jpg"/>',
    Screenshot_2012-12-27-13-16-19.jpg
    Operating System:
    • Win 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I simplified your itemTpl to still display the issue. Also, here is the test case you should have provided, a locally runnable test:

    Code:
    Ext.Viewport.add({
        xtype     : 'list',
        store     : {
            fields : [],
            data   : [
                {},
                {}
            ]
        },
        itemTpl   : [
            '<div style="border: 2px solid red;">',
                '<img style="max-width: 80% !important;" src="https://surf-space.com/wp-content/uploads/spots/user_reports/1/1_1354866075.jpg"/>',
            '</div>',
        ],
        listeners : {
            order  : 'before',
            select : function () {
                return false;
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Hi @mitchellsimoens,

    I see that this bug report was closed with reason:
    Looks like we can't reproduce the issue or there's a problem in the test case provided.


    Is this a mistake? (you have said that
    I simplified your itemTpl to still display the issue.
    )

    Anyway, this issue still exists in Sencha Touch 2.2 beta 1. Here is a test case:
    Code:
    Ext.Viewport.add({
     xtype     : 'list',
     id          :    'mylist',        
     store     : {
      fields : ['img'],
      data: [
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/98/98_1362818099_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/59/59_1362734156_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/79/79_1362636279_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/119/119_1362570847_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/79/79_1362555278_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/242/242_1362545894_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/242/242_1362468439_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/242/242_1362467632_small.jpg'},
       {img: 'https://surf-space.com/wp-content/uploads/spots/user_reports/47/47_1362467437_small.jpg'}
      ]
     },
     itemTpl   : [
      '<div style="border: 2px solid red; width:90%; margin-left:auto; margin-right:auto">',
       '<img style="width: 102% !important; margin-left:-1%;" src="{img}"/>',
      '</div>',
     ],        
     listeners : {
      order  : 'before',
      select : function () {
       return false;
      }
     }
    });
    Resizing the window, closing/openning the dev console or calling 'doRefresh()' explicitly on the list solves the issue.
    Please advice.

    Here is a printscreen from Goggle Chrome:

    listImgHeightBug.jpg

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    23
    Vote Rating
    6
    Razr is on a distinguished road

      1  

    Default


    This issue sounds very similair to this one: TOUCH-3781.

    Unfortunately there is no feedback at all from the moment the Sencha team decides to make something a bug. I have no idea where I can check the status, whether this issue is on a back-log or scheduled for a sprint. That could use improvement.

  6. #6
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    davidmohoric is on a distinguished road

      0  

    Default


    Go to sencha-touch-all-debug.js and find section config:

    itemHeight: 47 set to itemHeight: 0 !

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Thanks for the suggestion @davidmohoric

    But your suggested solution did not solve the issue....