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/cac3d2be-7042-4ffa-b256-48d7c9091f9eo%40googlegroups.com.
