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:
\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 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:
>
> 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/1e8aa00e-4d8e-4b13-8501-cf5132be326do%40googlegroups.com.
