#14582 closed enhancement (fixed)
dojox.mobile.ListItem should have a widget as replacement of the rightIcon
Reported by: | ebengtso | Owned by: | ykami |
---|---|---|---|
Priority: | blocker | Milestone: | 1.8 |
Component: | DojoX Mobile | Version: | 1.7.0 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
The right icon does not provide enough flexibility in today's use of ListItem? in mobile apps.
ListItem? commonly have action buttons shown on the right corner. Usually the button is initially hidden, but an icon is displayed. When the user clicks on left side of the ListItem?, or performs a swipe, the button is displayed.
Such flexibility could be achieved if we were able to:
-define a widget placed on the right corner of the ListItem? -listen on the click of the left icon in the ListItem? -listen on the swipe of the ListItem?
An example: http://a3.mzstatic.com/us/r1000/090/Purple/c2/e8/61/mzl.rcdvjxfc.320x480-75.jpg
Change History (10)
comment:1 Changed 8 years ago by
comment:2 Changed 8 years ago by
Not the most elegant solution, but it does layout the contents the way I want.
<div dojoType="dojox.mobile.ListItem?"> Text <div style="float:right; margin-top: -32px;"> <input type="text"/> </div> </div>
Not sure if you consider this as a workaround, but I think I can find a way to mimic iphone's behaviour.
comment:3 Changed 8 years ago by
Specifying a child widget through a ListItem property does not sound an elegant solution either. Any better ideas (from the dojo API consistency perspective)?
comment:4 Changed 8 years ago by
like BorderContainer?, we could search nested nodes for "layout" property, and layout them accordingly.
eg
<div dojoType="dojox.mobile.ListItem" label="Text"> <div dojoType="Look" layout="left"></div> <div dojoType="Action" layout="right"></div> </div>
or
<div dojoType="dojox.mobile.ListItem"> <div dojoType="Lock" layout="left"></div> <div layout="center">Text</div> <div dojoType="Action" layout="right"></div> </div>
comment:5 Changed 8 years ago by
That makes sense. Something like that would be useful especially when ListItem is variable height, that is, when you cannot hard-code top-margin. Let me think about it. Thank you.
comment:7 Changed 8 years ago by
Milestone: | tbd → 1.8 |
---|---|
Status: | new → assigned |
comment:9 Changed 8 years ago by
fyi, regarding the example in the description, test_EdgeToEdgeList-editable.html provides an example of a different approach, which does not require a button widget.
comment:10 Changed 8 years ago by
Nice, but the vertical alignment only work for text nodes, and not for DIVs
You can place a widget as a child of ListItem, and set float:right (and probably margins) to the widget.