Making inline checklists, preventing checkbox from creating new paragraphs?

[Justin_H]

Hi all,

I decided to work on a project on my todo list, which was making a basic and lightweight inline checkbox macro that stores the checked tasks in the field of the tiddler. (see below for working code.)

The only issue i am running into right now is how every new task made is making a new paragraph element, putting a bunch of padding between tasks.

Now, I think this is an easy fix with a bit of CSS, but I wanted to know if there was a way to prevent the checkbox widgets from creating multiple paragraph html elements?

\define task(task)
<$checkbox listField="completed-tasks" checked={{{ [[$task$]] }}} unchecked={{{ -[[$task$]] }}} default=""> [[$task$]]</$checkbox>
\end

<<task "Clean litterbox">>
<<task "Fold laundry">>
<<task "placeholder">>

Any advice is appreciated, I’m sure this is probably more on the basic side of things

[TW_Tones]

I think i understand your issue, and i may have some answers for you as i have implemented something similar in my key wiki. A couple of questions and pointers first.

• why use the depricated define and not proceedure?
• my quick test of your code on tiddlywiki.com has some funny results i need to review later.
• there are already many such solutions out there and in my view macros or widgets are the least effective, because there is more typing.

My preference is using the alt markup of the form ‘’ for unchecked and ‘’ for checked. Further i modified the autolist widget so hitting enter creates an additional item. I also have an editor tool bar button to toggle this symbol on multiple lines.

[pmario]

I am not a 100% sure, what you try to achieve, but if you add a space after the first <<task "Clean litterbox>> , instead of the xx which I did use to make it visible IMO it should do what you want.

I am also not sure what your filtered transclusion is used for. IMO it’s not necessary at all.

\procedure task(task)
<$checkbox listField="completed-tasks"
  checked=<<task>>
  default="">
 <<task>>
</$checkbox>
\end

<<task "Clean litterbox">> xx 
<<task "Fold laundry">>
<<task "placeholder">>

If you want a link instead of plain text use <$link to=<<task>>><<task>></$link> instead of the <<task>> macro

[andrewg_oz]

I think @pmario’s suggestion of adding a space after each task is halfway there. Add a <br> after the </$checkbox> as well to get each task on a new line, but without the paragraph padding.

[Justin_H]

@TW_Tones

why use the depricated define and not proceedure?

happy to answer! I use it because it is what i know how to use. I tend not to use things I do not understand, just so I do not run into any unexpected behavior.

I am unfortunately not that capable with tiddlywiki, it takes me some time to learn to use newer features, and since I rarely have the time to sit and tinker with tiddlywiki outside of the occasional stylesheet, I unfortunately haven’t used many of the newer things like the if then else things with the angle brackets and percentile symbols, for example..

@TW_Tones

there are already many such solutions out there

you are very much correct, with my personal favorite being kara, but I wanted to make something of my own, i find it to be the best way to learn, and even come up with my own new ideas.

also, I haven’t seen anyone’s solutions have the ability to add tasks like you can this way.

i.e. “Just finished work and came home, going to need to <<task "take out the trash">> after I get settled.”

@pmario

I am not a 100% sure, what you try to achieve

Just wanting to be able to display a task inline with normal text, or to just type them one after another and show as a single collection of checkbox items, rather than each one being in their own <p>

i.e. this is the result of what I originally shared at the start of my post, when I use the internals plugin to view the raw html:

<p>
   <label class="tc-checkbox ">
      <input type="checkbox">
      <span> <a class="tc-tiddlylink tc-tiddlylink-missing" href="#Clean%20litterbox">Clean litterbox</a></span>
   </label>
</p>
<p>
   <label class="tc-checkbox ">
      <input type="checkbox">
      <span> <a class="tc-tiddlylink tc-tiddlylink-missing" href="#Fold%20laundry">Fold laundry</a>
      </span>
   </label>
</p>
<p>
   <label class="tc-checkbox ">
      <input type="checkbox">
      <span> <a class="tc-tiddlylink tc-tiddlylink-missing" href="#placeholder">placeholder</a></span>
   </label>
</p>

(I indented the code above for easier reading, it just shows as one block of text otherwise.)

@andrewg_oz

I think @pmario’s suggestion of adding a space after each task is halfway there. Add a <br/> after the </$checkbox> as well to get each task on a new line, but without the paragraph padding.

I was able to replicate that by typing out <<task 'placeholder'>><br/> but when I tried to add it within the procedure or even placing the procedure inside of another one specifically for adding the break row after each one, I couldn’t get it to work

I imagine if I do manage to include it whenever I call it I wouldn’t be able to use it inline without it putting the text after it on a new line though, huh?

I might just stick to manually typing <br/> after each one.

Below does not work

\procedure task-item(task-item)
<$checkbox listField="completed-tasks"
checked=<<task-item>>
default=""> <<task-item>></$checkbox>
\end
\procedure task(task)
<$transclude $variable="task-item" task-item=<<task>>/><br/>
\end

\procedure task-item(task-item)
<$checkbox listField="completed-tasks"
checked=<<task-item>>
default=""> <<task-item>></$checkbox>
\end
\procedure task(task)
<$transclude $variable="task-item" task-item=<<task>>/><br/>
\end

<<task "Clean litterbox">>
<<task "Fold laundry">>
<<task "placeholder">>

Below does work though

\procedure task(task)
<$checkbox listField="completed-tasks"
checked=<<task>>
default=""> <<task>></$checkbox>
\end

<<task "Clean litterbox">><br/>
<<task "Fold laundry">><br/>
<<task "placeholder">><br/>

(Also, why does a procedure have you use <<this>> over $this$ for variables within it? What happens if you try to use <<currentTiddler>> instead of $currentTiddler$? sorry if that seems like a bit of a dumb question- I’m not used to doing it is all )

edit: corrected some incorrect code, the new talk.tiddlywiki editor was messing things up when I was replying from my phone

[Mario]

@Justin_H … can you please set an avatar image with an outline. IMO it is irritating that it is white on white, if users have light theme active.

[Justin_H]

oop, yea I can do that. I’ll go look for a new one, thanks for letting me know

edit: mario, does this look alright on light theme? I picked one with a color gradient in the background (its noface my favorite character )

edit2: It appears my previous avatar shows for all posts made prior to the change, so I apologize to anyone who may be inconvienced by that, I’m not sure I have the ability to change that. I have no objection to my prior avatars being removed if that is possible by someone one admin rights, I quite like my new one over the last two

[Thomas_Chuffart]

@Justin_H

also, I haven’t seen anyone’s solutions have the ability to add tasks like you can this way.

You could take a look a this elegant “sticky” solution.

[Justin_H]

Wow, that seems like a much more powerful version of what I am attempting.

That is a solid plan B for me, though at the moment I had a different idea pop into my mind about trying a different approach.