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

[rbahumi]

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:
  

  // "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.
  

  '<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

[mitchellsimoens]

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

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;
        }
    }
});

[mitchellsimoens]

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

[rbahumi]

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:

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

[Razr]

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.

[davidmohoric]

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

itemHeight: 47 set to itemHeight: 0 !

[rbahumi]

Thanks for the suggestion @davidmohoric

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