Ability to lock navigation when interacting with a checklist (at least in iOS app)

I know its possible to lock editing right now, but it’s still quite easy to miss the checkbox and navigate to the sublist instead.

A typical use case would be a shopping list. I definitely know that I don’t want to navigate in or out of the current level of the list I’m looking at right now and it would be good if I could just lock it down completely, so the only clickable/tappable areas in the app would be the checkboxes.

3 Likes

Try to add this to your custom CSS :
/* checkbox on mobile does not trigger zoom */
.is-mobile .Node-bullet {
pointer-events: none;
}

I have this issue everytime I grocery shop as well, would be great if “lock mode” prevented that from happening! Unfortunately Kenneth’s solution isn’t ideal for my needs, as I like to zoom-in and drag items around using the bullet point when not in “lock mode”.

It looks like they toggle editability of all content elements when you toggle the lock, so there’s no CSS selector that can be used to selectively disable pointer events only when it’s a checkbox and in lock mode. It would look something like the following (note that .lock-mode does not actually exist…):

/*
 * Disable bullet click triggering zoom for checkbox items on
 * mobile when in lock mode.
 */
.is-mobile .lock-mode .Node.has-checkbox .Node-bullet {
    pointer-events: none;
}

As a hacky fix, I decided to add more left-margin to the checkbox so that it shifts it over to the right and makes it harder to accidentally press the bullet.

/*
 * Shift checkbox over to the right on mobile.
 *
 * Makes it harder to accidentally click on zoom-in bullet.
 */
.is-mobile .Node:not(.is-currentRoot) .Node-checkbox {
    margin-left: 8px;
    margin-right: -16px;
}
.is-mobile .Node.has-checkbox .Node-contentContainer {
    margin-left: 18px;
    margin-right: -14px;
}