#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)
Change History (8)
Changed 8 years ago by
Changed 8 years ago by
| Attachment: | iconBug.html added |
|---|
comment:1 Changed 8 years ago by
| Component: | General → DojoX Mobile |
|---|---|
| Owner: | set to ykami |
comment:2 Changed 8 years ago by
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
| Priority: | high → normal |
|---|
Lowered the priority since workaround is available.
comment:4 Changed 8 years ago by
| Milestone: | tbd → 1.8 |
|---|---|
| Status: | new → assigned |
a simple testcase