PDA

View Full Version : [CLOSED] '<img>' height is ignored inside a list's item



rbahumi
27 Dec 2012, 3:38 AM
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.
40979
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"/>',

40980
Operating System:

Win 7

mitchellsimoens
27 Dec 2012, 6:33 AM
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
27 Dec 2012, 6:33 AM
Thanks for the report! I have opened a bug in our bug tracker.

rbahumi
14 Mar 2013, 1:10 AM
Hi @mitchellsimoens (http://www.sencha.com/forum/member.php?22216-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:

42390

Razr
14 Mar 2013, 3:37 AM
This issue sounds very similair to this one: TOUCH-3781 (http://www.sencha.com/forum/showthread.php?249938-List-Items-with-height-gt-47px-not-rendered-correctly.).

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
21 Mar 2013, 4:07 AM
Go to sencha-touch-all-debug.js and find section config:

itemHeight: 47 set to itemHeight: 0 !

rbahumi
22 Mar 2013, 12:24 AM
Thanks for the suggestion @davidmohoric

(http://www.sencha.com/forum/member.php?565921-davidmohoric)But your suggested solution did not solve the issue....