Transclusion question: how to remove space above and below text of tiddler?

#1

If I create a list with the list widget and display results as transclude, there is always a lot of wasted space between entries vertically. Is there a way to remove the space above and below the text of transcluded tiddlers when displaying them in a list, so that it appears as if it were a single-spaced list?

#2

There are likely many ways. The first two that come to mind for me are to use inline mode on the transclusion, or to wrap up the results in a DIV that you can target with CSS. The first one (shown in two variants below) is most likely useful if your transcluded content is simple. If the content has multiple paragraphs, bullets, or any block formatting, the latter will likely be necessary.

Inline Mode

(explicit inline mode)

<$list filter="[tag[MyTag]]"><$transclude $mode="inline"/><br/></$list>

(implicit inline mode)

<$list filter="[tag[MyTag]]">
<$transclude /><br/> <!-- The lack of a blank line above makes this inline mode.  
                          They would run together but for the `<br/>`  --> 
</$list>

Using CSS

(css)

.single-spaced > p {margin: 0}

(wikitext)

<div class="single-spaced">
<$list filter="[tag[MyTag]]">

<$transclude /> <!-- The blank line above makes this block mode, and
                     the transclusions automatically get wrapped in `<p>` tags 
                     The CSS removes the margins on those `<p>` elements. -->
</$list>
</div>

Note that the CSS strictly targets p tags that are direct children of our .single-spaced <div>. It shouldn’t affect paragraphs nested further in.

Note that you can also explicitly set block mode on the transclusion, with <$transclude $mode="block"/>.

SingleSpacedTransclusions.json (1.2 KB)

2 Likes
#3

Thanks Scott! I will try the CSS route since I tend to use bullets which get messed up using inline

#4

You may have to tweak the CSS if there are left and right margins for those paragraphs you want to keep. This was a simple proof of concept.

#5

Nope, it worked perfectly!