Preview Tiddler button and css

[TW Tones]

Folks,

If you place the following in a tiddler on tiddlywiki.com, you will see it generates a preview of tiddlers with The TableOfContents tag.

To get here I have begged, borrowed and stolen code. 

The problem is I do not know how to remove the empty space between each preview.

Any advice and I would be grateful.

\define preview(filter)
<style>
.preview {
    width:600px;
    min-height:400px; max-height:400px;
    -webkit-transform:scale(.25);
    -ms-transform:scale(.5);
    transform:scale(.5,.5);
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    border:1px solid blue;
    margin:0 0 0 0;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
}
</style>

<$set name=filter value="$filter$" emptyValue="[[$(currentTiddler)$]]" >
<div style="    column-count: 4;">
<$list filter=<<filter>> >
<$button to=<<currentTiddler>> tooltip={{{ [all[current]addprefix[Open: ]] }}} class="preview" tag="div">
<$link/>
<$transclude mode=block/>
</$button>
</$list>
</div>
</$set>
\end


<<preview "[tag[TableOfContents]]">>

Of course when working I would move the styles to a stylesheet and macro to a tiddler tagged macro.

Regards

TW Tones

[Saq Imtiaz]

I haven't tested your code but I can guess what the problem is from your CSS.

When using transform:scale with CSS, the various block level elements are rendered before being scaled. As such, they take up as much space as their original size. There are various workarounds that work, depending on the HTML structure. A search for something like "transform scale empty space" should point you in the correct direction.

[Felicia Crow]

Hi Tony,

Is there a reason you define a width and height and then scale it down?

Scaling like this does not affect the document flow, meaning that while you see the scaled down elements on screen in the background the size of each of your previews is still considered 600px when it comes to positioning the next element.

That is where the gaps come from.

Also as an info: When trying it in my own wiki - which unlike tiddlywiki.com uses a fixed story - this happens:

I will test out what tiddlywiki does with flexbox or css grid as a possible alternative solution.

Regards,

Felicia

[Saq Imtiaz]

A quick fix that works for most use cases is to wrap your div in a wrapper div and give it the final height and width of the div being resized (original width x scale), as well as overflow: auto.

Something like

.mywrapper {

  width: 300px;

  height: 200px;

  overflow: hidden;

[Felicia Crow]

Oh two people one thought, although Saq definitely explained it better.

If scale is not important and it is just about sizing I played around a little and found this solution using flexbox:

\define preview(filter)
<style>
.preview-container{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
.preview {
  width: 24%;
  max-height: 400px;    
  border:1px solid blue;

  padding: 10px 10px 10px 10px;
  overflow: hidden;

  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

<$set name=filter value="$filter$" emptyValue="[[$(currentTiddler)$]]" >

<div class="preview-container">

<$list filter=<<filter>> >
<$button to=<<currentTiddler>> tooltip={{{ [all[current]addprefix[Open: ]] }}} class="preview" tag="div">
<$link/

>

<$transclude mode=block/>
</$button>
</$list>
</div>
</$set>
\end


<<preview "[tag[TableOfContents]]">>

I tested it on tiddlywiki.com in Firefox, Chrome and Edge, and on my own wiki on TiddlyDesktop and AndTidWiki. The only thing I noticed is that on mobile - probably due to the smaller screen size - there are only three previews in a row.

Also should you use this and want to have 400px in gerneral just change out max-height to height. I just found it worked better in an universal way seeing how for instance my tableofcontent tiddlers are often not very large and mostly used for sorting other tiddlers so the 400 was mostly empty space. In the same vein a min-height could be added depending on what you need.

On Monday, 6 July 2020 10:34:48 UTC+2, TW Tones wrote:

[TW Tones]

Felicia,

That certainly solves the unwanted space issue. I only see them stacked vertically and my desire to wrap them all in a 

<div style="column-count: 4;">

</div>

Is not working on top of your solution

Thanks for you response

TW Tones

[Felicia Crow]

So first testing it on another computer copying in what I actually send you I see what you mean with vertically stacked. So I have to recheck my code to see what went wrong, sorry for that. In my tests it worked, but there I imported it via drag and drop from the wiki I worked in. From which I also copied it so in theory it should be the same. Oh well, a good lesson of always double-check everything.

Second for your desire to wrap it into a div with column-count I have to rework my solution. I replaced the column-count with the preview-container to set up flexbox and the columns are handled by setting a percentage on the width property of the preview div itself and letting flexbox do the rest.

Will see what I can do and get back to you.

Felicia

[Felicia Crow]

Hi Tony,

I don't know what I did, but I somehow managed to get an empty line after copying where there isn't one in my tiddler. The reason the code broke was that tiddlywiki put the preview divs in a paragraph due to the empty line between the outer div and the list widget. So removing that it works:

I also played around with using your wish for a div with the column-count property as wrapper for the previews and this is the result:

\define preview(filter)
<style>
.preview {

  height: 400px;    
  border:1px solid blue;
  padding: 10px 10px 10px 10px;
  overflow: hidden;

  margin-bottom: 10px;
}
</style>

<$set name=filter value="$filter$" emptyValue="[[$(currentTiddler)$]]" >

<div style="column-count: 4;">
<$list filter=<<filter>> >
<$button to=<<currentTiddler>> tooltip={{{ [all[current]addprefix[Open: ]] }}} class="preview" tag="div">
<$link/

>

<$transclude mode=block/>
</$button>
</$list>
</div>
</$set>
\end


<<preview "[tag[TableOfContents]]">>

A few things that I learned and/or noticed:

• Looking up the property I found that column-count or rather the whole set of column properties seem to be intended to break up large chunks of text similar to multi-column layouts in newspapers and magazines not multiple elements.
• The behaviour of column-count makes it necessary to use a fixed height.
• column-count works top to bottom first when filling the columns. E.g.: When using the macro on tiddlywiki.com and tagging another tiddler with TableOfContents there will be four columns in the first row, but only three in the next three rows.
  

Hope it helps you regardless.

Regards,

Felicia

On Monday, 6 July 2020 12:49:59 UTC+2, TW Tones wrote: