Here is a CSS solution using flexbox. Feels pretty darn good actually. It is responsive, i.e re-positioning to display fewer columns if the window is too small.
It works also for tag popups, as shown in the code below, i.e the tag-popup displays in front of everything, just as it should. You don't directly specify a fixed number of columns but instead specify the max-width for the list (could be a transclusion of the tiddler width) and the width for each item. It lists from left to right, then wrap to new row. If you don't use the tagpill template but instead show tiddler titles, these show fully by wrapping at the item width. making each row adapt as needed. If you want cropped titles I thing this, i.e fixed cell/row height, would be simple by styling the item class. If you want it to appear like a traditional table you can simply add a border to the item css. For headers I guess you must fiddle a bit more ;-) I am uncertain if my css attributes are fully correct. Anyone CSS skilled - you're more than welcome to correct it here. BTW, here <https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties> is a very nice guide on flexbox. <:-) <div class="dynamic-table"> <$list filter="[has[tags]tags[]sort[title]first[110]]"> <span class="item"> <$transclude tiddler="$:/core/ui/TagTemplate"/> </span> </$list> </div> <style> .dynamic-table { max-width:700px; /* could transclude tiddler width instead */ -ms-box-orient: vertical; /* this should probably not be here */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: inline-flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; flex-direction: row; } .item { max-width:160px; min-width:160px; flex: 0 0 2em; /* -grow, -shrink, -basis */ } </style> -- 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+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a171f2a8-afba-4b14-aee1-b0746d525c30%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
