Clicking on an issue to mark it completed is rather difficult on a phone

[cjolif]

This is easy on the desktop but on the phone most of the time I tried to check the checkbox the items is selected instead of the checkbox being checked.

[ccmitchellusa]

maybe the css should have user-select none in css for the list items?

-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

[ccmitchellusa]

or do u mean the item navigation kicks in instead of the checkbox?

[edchat]

The size of the checkbox is coming from the dojox/mobile/themes CheckBox.css .mblCheckBox which for iPhone and android is setting the width and height to 1em;

Do you think we should try to override this to make them bigger?

[edchat]

When I was playing with it, I was able to check the checkbox about 70% of the time, and about 30% it selects the item instead.

[cjolif]

@ccmitchellusa yes I meant I trigger item navigation.

@edchat I think the size is ok, what is not ok is the zone around the checkbox that triggers the checkbox selection? On the reminder iOS app as soon as I'm click to the left of the label it select the checkbox. Here I really need to target the checkbox itself and can't rely on the area. I'm not sure we can do something maybe this is for dojox/mobile to allow this?

[ccmitchellusa]

possible to use

<li><button><label>Item Text</label></button></li> 

inside the item with the label text as the item name? rather than just

<li><button></button>Item Text</li>

[edchat]

This is what we are currently using, the checkbox is in the table.

                <li  data-dojo-type="dojox.mobile.ListItem" clickable="true" class=mblVariableHeight
                    data-dojo-props="onClick: function(){todoApp.showItemDetails('#{this.index}');}"
                    transitionOptions='{title:"Detail",target:"details,EditTodoItem",url: "#details,EditTodoItem"}'>  
                    <table><tr>
                        <td><input preventTouch='true' type='checkbox' 
                                data-dojo-type="dojox.mobile.CheckBox" 
                                data-dojo-props="checked: at('rel:#{this.index}','completed')"/></td>

                        <td data-dojo-type="dojox.mvc.Output" 
                            data-dojo-props="value: at('rel:#{this.index}','title')"></td>
                    </tr></table>
                </li>

[ccmitchellusa]

try putting that Output for the item text into a nested label inside the checkbox (i incorrectly said in prev post)

On Fri, Jun 1, 2012 at 12:16 PM, Ed Chatelain < reply@reply.github.com

wrote:

This is what we are currently using, the checkbox is in the table.

                               <li  data-dojo-type="dojox.mobile.ListItem"
clickable="true" class=mblVariableHeight
                                       data-dojo-props="onClick:
function(){todoApp.showItemDetails('#{this.index}');}"

 transitionOptions='{title:"Detail",target:"details,EditTodoItem",url:
"#details,EditTodoItem"}'>
                                       <table><tr>
                                               <td><input
preventTouch='true' type='checkbox'

 data-dojo-type="dojox.mobile.CheckBox"

 data-dojo-props="checked: at('rel:#{this.index}','completed')"/></td>

                                               <td
data-dojo-type="dojox.mvc.Output"

 data-dojo-props="value: at('rel:#{this.index}','title')"></td>
                                       </tr></table>
                               </li>

---

Reply to this email directly or view it on GitHub: https://github.com/cjolif/dojo-todo-app/issues/84#issuecomment-6064276

[edchat]

@ccmitchellusa are you saying that it should check the checkbox when the Title of the todo item is touched? I don't think we can put the title inside the checkbox input anyway, but I also don't think I like the idea that touching the label would check the box instead of showing the details... I guess I would be ok if the left edge of the ListItem (before the label) would do the check, but I think the clicking the title should go to details.

[cjolif]

There are two things here: 1/ preventing triggering navigation on an area bigger than the checkbox. That is relatively easy, we just need to use preventTouch=true on something a bit wider than the Checkbox, the table cell for example 2/ increasing area that respond to CheckBox selection. That one is not easy and maybe not necessary.

I will implement 1 for now.

[edchat]

That sounds good, I agree that "increasing area that respond to CheckBox selection. That one is not easy and maybe not necessary." once navigation is stopped for the area around the checkbox.

[edchat]

Your fix worked for me, so after going thru the merge and moving the style for the prevent touch div into demo.css I thought I would go ahead and commit it for you.