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
On Monday, 6 July 2020 12:49:59 UTC+2, TW Tones wrote:
>
> 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
>
>
>
> On Monday, July 6, 2020 at 8:34:09 PM UTC+10, Felicia Crow wrote:
>>
>> 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:
>>>
>>> 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
>>>
>>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c6dae8e8-c4d7-4ee8-b7b3-0686b7ced05ao%40googlegroups.com.
