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;
}
On Monday, July 6, 2020 at 11:39:23 AM UTC+2, Saq Imtiaz wrote:
>
> 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.
>
> On Monday, July 6, 2020 at 10:34:48 AM 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/30b8a195-99e4-4145-b08f-8cb0dc1f199fo%40googlegroups.com.
