Multicolumn list

#1

I have a long list displayed by the widget list that I would like to display over 3 columns in my tiddler. How to achieve this?

#2

Enclose the $list widget inside a <div style="column-count:3;">, like this:

<div style="column-count:3;">
<$list filter="...">
...
</$list>
</div>

If you prefer to use CSS classnames instead of “inline styles”:

First, create a tiddler (e.g., “MyStyles”), tagged with $:/tags/Stylesheet, containing:

.threecols { column-count:3; }

Then, use it this way:

<div class="threecols">
<$list filter="...">
...
</$list>
</div>

Note that there are other column-related CSS attributes to control how the columns will be rendered. See CSS Multiple Columns for more details.

3 Likes
#3

I will just add if you are happy for the multiple columns to apply to the whole tiddler “body”, not only within a particular div, you can introduce the column count style through the tiddlers class field

using Erics MyStyles tiddler

Now simply give a tiddler the class field with a value of the class you just defined threecols.