Ease-of-Use of TODO Check Box on iOS/SmartPhone

Archive Feature Requests
#1

Hi,

EDIT: Size doesn’t matter. Theres something intrinsic to the editor which stops the simple toggle of a checkbox on tap without editor focus first being drawn to the REM line.

native app needed!

Could the enlargement of the Checkbox please be made possible? When tapping the screen I can sometimes trigger the check/uncheck but most of the time what happens is RemNote enters the editor mode for that specific REM.

I’m using a modern big-screen phone, iPhone X

Would be a lot more consistent if the checkbox could be enlarged for tapping!

Very happy with the Progressive WebApp meanwhile on iOS. I feel like more attention was put into its usability, in comparison to competitor RoamResearch which is GARBAGE on mobile. The large menu icons are good.

#2

A Custom CSS implementation (What is Custom CSS and how do I use it?) with the current markup is pretty ugly. The best you can do is this:

image

.rem-checkbox {
  transform: scale(1.75);
  margin-left: 8px !important;
  margin-right: 10px;
}

Adding a <label> to each checkbox should be pretty easy and it allows more beautiful checkbox styles and possibly other hacks.

Something like this should be trivial to implement and goes a long way:

<input id="rem-checkbox-REM_ID" class=".rem-checkbox" type="checkbox" />
<label for="rem-checkbox-REM_ID"></label>

More on checkboxes and CSS: html - How to style a checkbox using CSS - Stack Overflow

2 Likes
#3

Wow! I’m going to schedule to read this in my down-time and come back :wink: Thank you Hannes :slight_smile:

Could this be in the form of a custom plugin? Would custom CSS work between smartphone (iOS) and desktop?

1 Like
#4

Yes, Custom CSS is per knowledge base and therefore synced between devices! Read What is Custom CSS and how do I use it?. It should be explained in that topic.

#5

Thank you! I read this and for future #remmunity finding this post I testify Hannes post is great on learning Custom CSS!

My only lamentation is that, though the checkbox is now bigger on iOS after having used Hannes lovely code, it doesn’t seem to have solved the issue :laughing:

When tapping a check box what seems to happen is that first the cursor moves to the rem and the iOS keyboard opens up, then on the second tap you can toggle the check box.

Changing the size of the checkbox has had no effect, and therefore seems it wasn’t the issue limiting the ease of TODO use on iOS. Seems to be intrinsic to the KB engine.

Any rem I try this on its the same thing, first the editor switches focus to the rem, then the second tap can actually toggle the TODO. its disorientating as the whole screen moves up and down each time the editor changes focus as the keyboard opens and closes.

… I suspect this can’t be fixed and is simply down to the mechanics of the KB engine…

2 Likes
#6

This probably has to do with RemNote not being optimised for touchscreen yet, in my experience. I made a bug report on this Issue with touchscreen interactions · Issue #1107 · remnoteio/remnote-issues · GitHub although in the report I didn‘t exactly mention the problem you are facing. But I’m pretty sure it’s the same underlying bug. Hopefully these kinds of issues get fixed with the UI/UX revamp.