multi-column list

[Peter Buyze]

I have a number of tiddlers that list info for me. Some of those lists are becoming long, which means a lot scrolling. Is there a way to split a list up in several columns in Read mode?

Here are 2 typical pieces of code/script:

```

<$list filter="[all[tiddlers]each[number]sort[number]get[number]]" variable=value >

__<<value>>__<br>

<$list filter='[all[tiddlers]number<value>sort[]]'>

</$list>

</$list>

```

and

```

<div class="tc-table-of-contents">

    <<toc-selective-expandable "xtag" sort[title]>>

    </div>

```

--

Securely sent with Tutanota. Get your own encrypted, ad-free mailbox:

https://tutanota.com

[Peter Buyze]

My apologies for not putting it in neat boxes - the HTML way with triple backticks (```) does not work.

29 Apr 2020, 10:27 by tiddl...@googlegroups.com:

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/M63pKbx--3-2%40tutamail.com.

[Birthe C]

Peter,

In a stylesheet put the following:

/*COLUMNS*/

.twocolumns {
display:block;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;}

.threecolumns {
display:block;
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;}

.fourcolumns {
display:block;
column-count:4;
-moz-column-count:4;
-webkit-column-count:4;}

.fivecolumns { display:block;
column-count:5;
-moz-column-count:5;
-webkit-column-count:5;}

Then wrap your code with as an example

@@.threecolumns
your code
@@

Birthe

[Peter Buyze]

Birthe,

thanks so much, it works perfectly!

29 Apr 2020, 11:23 by strikke...@gmail.com:

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b6f44066-1064-4120-85a1-40ec85eb6bac%40googlegroups.com.

[baj...@gmail.com]

This code works great, except it seems to trigger a Tiddlywiki rendering issue for me. I'm adding the workaround I figured out in case anyone is having similar issues.

Problem: Basically Tiddlywiki doesn't appear to recognize the multicolumn section as part of the "contents" of the tiddler. If there isn't any text after the multicolumn, the contents of the multicolumn list overrun the tiddler boundary and mess up downstream tiddlers. Even text afterwards doesn't always fix the issue (and isn't desirable in my case). The div block isn't acting as a display:block despite the tag (and the fact it is a div). The text wraps to the right hand side of the multicolumn when there is room breaking the rendering again.

Solution: I've been able to prevent the wrapping behavior be adding a <div style="width:100%"></div> wrapper around the multi column section. I avoided adding it directly to the multicolumn <div> block as it seemed to cause unexpected behavior with some of the column options.

[springer]

Baj,

Thanks for documenting -- I'm getting a rush of nostalgia for my MTG days! I've fantasized about building TW sites for my EDH decks, but it's a waning hobby now that my teenager has moved on. 🥲 

I think the Shiraz plugin's multicol features build in some similar wrapping to avoid display issues. You might check it out for various quick and powerful display options. I find that its careful GUI toolkit it frees up my time to focus on the content more.

Meanwhile, you might benefit from knowing that as the discussion community migrates to the https://talk.tiddlywiki.org/ forum, any code in your post risks getting lost. I've come to google groups to post this quick reply, but a helpful convention is to stick your code between tick marks like so: `<div style="width:100%"></div>` to avoid what looks like mysterious gaps in your post just where you want to share the technical details!

-Springer

[baj...@gmail.com]

Springer,

Thanks for the heads up about the Shiraz plugin, I'll look into it. I've been very much sticking with 'vanilla' as I've gotten my tiddlywiki bearings, but it is definitely time to stop reinventing the wheel and look at the many fine products others have come up with.

As for the forum change. For posterity, "Solution: I've been able to prevent the wrapping behavior be adding a `<div style="width:100%"></div>` wrapper around the multi column section. I avoided adding it directly to the multicolumn `<div>` block as it seemed to cause unexpected behavior with some of the column options."

I also failed to mention you still need some text after the multicolumn block. I'm using: `<span style="color:white">.</span>`

Baj