Display tiddlers in two columns

1,924 views
Skip to first unread message

Charlie Brown

unread,
May 9, 2015, 9:20:21 AM5/9/15
to tiddl...@googlegroups.com
Hi, I'm new to tiddlewiki (three days) but I'm really happy with it. Thanks a lot!
Right now my tiddlers are short and thin, and display them in only one column wastes too much spaces. Is there a theme or something so that I could list them in two columns? I did some searching but found no result.

Måns

unread,
May 9, 2015, 9:59:57 AM5/9/15
to tiddl...@googlegroups.com
Hi Charlie

I am not currently aware of any specialized theme for showing tiddlers in a side-by-side column fashion. 

There are however ways to show tiddlers in generated lists or sub stories (correct me if I'm wrong) that allows you to show them side by side by defining columns via css.

@Jeremy uses flexbox on tiddlywiki.com. Check out http://tiddlywiki.com/#%24%3A%2F_tw5.com-styles for his tc-link-info class, which is used in : 
Articles
Examples
Latest
Resources
Tutorials

Eric Shulmann has created StyleSheetShortCuts (for TW classic) which uses columns (not supported in Internet Explorer). You can import his stylesheet tweaks tiddler into a TW5 and tag it with $:/tags/Stylesheet

Cheers Måns Mårtensson

Charlie Brown

unread,
May 9, 2015, 12:07:59 PM5/9/15
to tiddl...@googlegroups.com
I see, so I can change the layout through css. I'll checkout the examples when I'm less sleepy:).

Sincerely,
王文鑫
Charlie

On Sat, May 9, 2015 at 9:59 PM, Måns <huma...@gmail.com> wrote:
Hi Charlie

I am not currently aware of any specialized theme for showing tiddlers in a side-by-side column fashion. 

There are however ways to show tiddlers in generated lists or sub stories (correct me if I'm wrong) and that allows you to show them side by side by defining columns via css.

@Jeremy uses flexbox on tiddlywiki.com. Check out http://tiddlywiki.com/#%24%3A%2F_tw5.com-styles for his tc-link-info class, which is used in : 
Articles
Examples
Latest
Resources
Tutorials

Eric Shulmann has created StyleSheetShortCuts (for TW classic) which uses columns (not supported in Internet Explorer). You can import his stylesheet tweaks tiddler into a TW5 and tag it with $:/tags/Stylesheet

Cheers Måns Mårtensson

Den lørdag den 9. maj 2015 kl. 15.20.21 UTC+2 skrev Charlie Brown:
Hi, I'm new to tiddlewiki (three days) but I'm really happy with it. Thanks a lot!
Right now my tiddlers are short and thin, and display them in only one column wastes too much spaces. Is there a theme or something so that I could list them in two columns? I did some searching but found no result.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/lVRs1qfXEsc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/897449c2-ac20-4f96-bfda-246eeed394e0%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Rustem

unread,
May 10, 2015, 3:05:20 AM5/10/15
to tiddl...@googlegroups.com

I’m on a roll today.


.tc-story-river {   display: flex;   flex-wrap: wrap; }

.tc-tiddler-frame { max-width: 49%; margin-right: 1%; }

Måns

unread,
May 10, 2015, 4:41:23 AM5/10/15
to tiddl...@googlegroups.com
Hi Rustem

Great stuff :-)

Thank you for sharing!

Add a height and overflow auto - and you've got small "tiddler windows" in two rows...:


.tc-story-river {   display: flex;   flex-wrap: wrap; }

.tc-tiddler-frame { max-width: 49%; margin-right: 1%;height:24em;overflow: auto;} 


Cheers Måns Mårtensson

Rustem

unread,
May 10, 2015, 5:21:45 AM5/10/15
to tiddl...@googlegroups.com

One-up ;)

  • Use max-height, no wasted space for smaller tiddlers
  • Put that in .tc-tiddler-body, that way the heading part won’t scroll (title,etc,tags)
.tc-tiddler-body { max-height: 24em; overflow: auto; }

Måns

unread,
May 10, 2015, 5:32:05 AM5/10/15
to tiddl...@googlegroups.com
+1 Nice :-)
...

Jed Carty

unread,
May 10, 2015, 11:42:05 AM5/10/15
to tiddl...@googlegroups.com
Rustem,

That is awesome. I was only thinking about this in terms of independently scrolling columns, but I can think of plenty of places where this would be at least as useful, if not more so. Do you mind if I post how to do this on the wiki reference wiki and put up a demo site?

R

unread,
May 10, 2015, 1:14:01 PM5/10/15
to tiddl...@googlegroups.com

Sure, go ahead. I'm going to update my demo as well. Maybe you could plug it in yours.  (Meaning "mention")

On May 10, 2015 8:42 AM, "Jed Carty" <inmy...@gmail.com> wrote:
Rustem,

That is awesome. I was only thinking about this in terms of independently scrolling columns, but I can think of plenty of places where this would be at least as useful, if not more so. Do you mind if I post how to do this on the wiki reference wiki and put up a demo site?

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/lVRs1qfXEsc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

Jed Carty

unread,
May 10, 2015, 1:31:27 PM5/10/15
to tiddl...@googlegroups.com
You will certainly get all the credit. If you have a demo site I will just link to that instead of putting up one of my own. If you have one what is the address?

R

unread,
May 10, 2015, 1:59:10 PM5/10/15
to tiddl...@googlegroups.com

No,no, you go ahead and do the demo. Please. Mine is just a working example, I'm too lazy to properly "demo" everything I've put in there. It's this one (not updated yet): http://solar-flair.tiddlyspot.com/. It's better suited for people who know how to dig into internals to see how the appearance was achieved.

You will certainly get all the credit. If you have a demo site I will just link to that instead of putting up one of my own. If you have one what is the address?

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/lVRs1qfXEsc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

Måns

unread,
May 10, 2015, 2:22:45 PM5/10/15
to tiddl...@googlegroups.com
Hi Rustem and Jed

I'm fiddling with a button/link to toggle the layout of two columns - it works - I don't think my solution is anywhere near a right way of doing it though...

I've used Hradek's and Tobias' ToggleContent macro to toggle the css from a field value into the stylesheet tiddler. I was thinking that it would be neat if the css had variables which were stored in tields and choosen from a select box... Next I would see if I could make the tiddler tagged with aboveStory be untouched by the css....

The last two things I haven't tried out yet...


The interesting bit of my experiment is that it proves that it is possible to use macro in a stylesheet tiddler and have a remote link to make text show up in it - and that it will affect the stylesheet layout... I hadn't dreamed that it could work that way when I started playing with it... It was just me fooling around..

I'm sure you'll come up with a better way to do a toggle button for tiddler rows..

Cheers Måns Mårtensson

Måns

unread,
May 10, 2015, 2:36:39 PM5/10/15
to tiddl...@googlegroups.com

Rustem

unread,
May 10, 2015, 4:39:20 PM5/10/15
to tiddl...@googlegroups.com
Ok I've posted it, no instructions, just see the button next to "Save changes". Switching is done by adding/removing a tag on the stylesheet tiddler.

Please, somebody help me get the link right in the "$:/_ra/buttons" tiddler, the last one - if I point to the "story", the URL is correct, otherwise it points to a cut-off name (nonexistent, so rendered in italics).

--R

Rustem

unread,
May 10, 2015, 4:48:49 PM5/10/15
to tiddl...@googlegroups.com
Another thing bugging me is if I change "list-before" in "$:/_ra/buttons/BookmarkHere" to "$:/_ra/buttons/TodoHere", the button jump all the way back.

Is this a bug or I don't understand something about http://tiddlywiki.com/#Order%20of%20Tagged%20Tiddlers?

Rustem

unread,
May 10, 2015, 9:32:10 PM5/10/15
to tiddl...@googlegroups.com
I fixed that link, never mind. This is the right way to link to tiddlers, so the spaces in the title are ok:

<$link to=<<currentTiddler>>><$view field=title/></$link>

I think I tried it with transclude before, and the space was rendering the link invalid.
Reply all
Reply to author
Forward
0 new messages