Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#14152 closed defect (fixed)

The icon position of ListItem is not correct

Reported by: remy314 Owned by: ykami
Priority: high Milestone: 1.8
Component: DojoX Mobile Version: 1.7.0b1
Keywords: Cc:
Blocked By: Blocking:

Description

When creating 'dojox.mobile.ListItem?' dynamicly with 'icon' prameter, the icon position of the first ListItem? is not correct.(only happens on the first listItem widget and the first time loading the example).

To reproduce the defect, clear the browser cache first and then run below code, you may see the result when clicking 'Add Item' button.

<html> 
<head> 
	<title>dojoMobile</title> 
	<script type="text/javascript" 
	src="./dojo/dojo.js"  
	djConfig="parseOnLoad: true"></script> 
    
    <script type="text/javascript">
        function addItem(){
            var list=dijit.byId("wList");           
            var listitem=new dojox.mobile.ListItem({icon:'images/delete.png',label:'<div>Line1</div><div>Line2</div>',
            variableHeight:true,clickable:false});          
            list.addChild(listitem);
        }
    </script>
    
	<script type="text/javascript"> 
	dojo.require("dojox.mobile"); 
	dojo.require("dojox.mobile.parser"); 
    dojo.require("dojox.mobile.Button"); 
    dojo.require("dojox.mobile.ScrollableView"); 
	dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
	</script> 
	<style type="text/css"> 
	@import "./dojox/mobile/themes/iphone/iphone.css"; 
	</style> 
</head> 
<body> 
	<div dojoType="dojox.mobile.View" selected="true">
        <button dojoType="dojox.mobile.Button" onclick="addItem()">Add Item</button>
        <div dojoType="dojox.mobile.ScrollableView">
			<div dojoType="dojox.mobile.RoundRectList" id="wList"></div>
		</div>
	</div> 
</body> 
</html>

I found it's because that the margin-top property of icon node in the first listItem is set to a wrong value after the widget is started up by dojo.

Attachments (2)

bug.jpg (9.2 KB) - added by remy314 8 years ago.
iconBug.html (1.2 KB) - added by remy314 8 years ago.
a simple testcase

Download all attachments as: .zip

Change History (8)

Changed 8 years ago by remy314

Attachment: bug.jpg added

Changed 8 years ago by remy314

Attachment: iconBug.html added

a simple testcase

comment:1 Changed 8 years ago by Adam Peller

Component: GeneralDojoX Mobile
Owner: set to ykami

comment:2 Changed 8 years ago by ykami

That's because the height of your image is not available yet when ListItem calculates the position of the image. I still don't have a good idea, but I will consider this issue. In the meantime, you can workaround it by explicitly specifying the dimension of your image as follows.

.mblListItemIcon img {
	height: 29px; /* height of your image */
}

Or, I believe this pretty old image prefetching technique should work as well.

<body>
  <img src="images/delete.png" style="display:none">
  ...

comment:3 Changed 8 years ago by ykami

Priority: highnormal

Lowered the priority since workaround is available.

comment:4 Changed 7 years ago by ykami

Milestone: tbd1.8
Status: newassigned

comment:5 Changed 7 years ago by ykami

Resolution: fixed
Status: assignedclosed

In [27620]:

Fixes #14152 !strict When necessary, re-calculate the position in the images's onload handler. This is performed only when images are not loaded in time.

comment:6 Changed 7 years ago by ykami

In [27647]:

Refs #14152 !strict Removed unnecessary trailing comma.

Note: See TracTickets for help on using tickets.