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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/30b8a195-99e4-4145-b08f-8cb0dc1f199fo%40googlegroups.com.