Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#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 ykami

You can place a widget as a child of ListItem, and set float:right (and probably margins) to the widget.

comment:2 Changed 8 years ago by ebengtso

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 ykami

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 ebengtso

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 ykami

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:6 Changed 8 years ago by Colin Snover

Priority: highblocker

Bulk update of open ticket priorities.

comment:7 Changed 8 years ago by ykami

Milestone: tbd1.8
Status: newassigned

comment:8 Changed 8 years ago by ykami

Resolution: fixed
Status: assignedclosed

In [27754]:

Fixes #14582 !strict Children of a ListItem? can have the layout property/attribute, whose value is "right", "center", or "left", to be able to be placed accordingly. Also, the preventTouch property/attribute can be specified to the children to disable the default click action.

comment:9 Changed 8 years ago by ykami

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 ebengtso

Nice, but the vertical alignment only work for text nodes, and not for DIVs

Note: See TracTickets for help on using tickets.