Any CSS HORIZONTAL layouts yet for TW?

[@TiddlyTweeter]

Rather than go with the vertical newspaper metaphor of a column, I wonder if anyone has a horizontal Story River.

It could be good for presenting some kinds of Tiddlers. Particularly good for graphics.

Anyone had a shot at it yet?

Best wishes
Josiah


 

[codacoder...@outlook.com]

Yes, I've sort-of done it.

In my case, certain tiddlers format the tiddler body as a set of css columns with fixed height(s).  Those tiddlers then scroll horizontally.

So, not a "storyriver", but certainly a horizontal presentation of the content with no vertical scroll at all.

.tc-tagged-bk-layout .tc-tiddler-body {
  max-height:770px;
  overflow-x:auto;
  width: 100%;
  position: relative;
 
  columns:3; -moz-columns:3; -webkit-columns:3;
  column-gap:3em; -moz-column-gap:3em; -webkit-column-gap:3em;
  column-rule: 3px dotted #ddd; -moz-column-rule: 3px dotted #ddd; -webkit-column-rule: 3px dotted #ddd;
}

[@TiddlyTweeter]

It may help with this layout issue I have... ???



Each of those is a Tiddler. I really need to better understand modern CSS flows.

Josiah

[codacoder...@outlook.com]

Hi Joshua

No, doubtful.

That sample looks as though you want/need a CSS-grid layout. Or maybe CSS flex (steeper learning curve). Or you could use CSS display:table et al. Worst case (not recommended) HTML tables.

All my code is doing is using CSS columns on suitably tagged tiddlers. When one of those tiddlers is displayed, its content is "split" into columns of the specified width/height. It does NOT display multiple tiddlers in some kind of host tiddler (ie not a transclusion mechanism).

HTH

[@TiddlyTweeter]

I think you are right. But also I should also play with whether I could transclude them? I sorta think it might be easier that way?

J.

codacoder...@outlook.com wrote:

 

That sample looks as though you want/need a CSS-grid layout. Or maybe CSS flex (steeper learning curve)...