Hi Mat, You certainly seem skilled in CSS to me!
Looks like a very versatile solution. I notice that some of the tags overlap into the next column. Appears you have to tweak the max/min pixels to suit your particular data set, right? Thanks! Mark On Sunday, September 11, 2016 at 3:34:04 AM UTC-7, Mat wrote: > > 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 [email protected]. To post to this group, send email to [email protected]. 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/431b4ef6-3483-44e0-b005-8f0584dc383a%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
