Transclude widget and block mode

[Reece Shaw]

Hello all,

I figure this is a more appropriate question for the group than the discord. I am working on some basic conditional formatting for form-fillable tiddlers that display fields in a series of rows. To achieve this, I'm using simple macro to call the text from the desired field:

\define fff-display-block(field:"")
<$list filter='[is[current]has[$field$]]'>
<$transclude field="$field$" mode="block"/>
</$list>
\end

this is to pull from within the current filter and display the text formatted so that things like block quotes get picked up. The block quote tranclusion renders a small amount of padding on the top and bottom of the rendered text so that if you have a field "test" with the value of "one" it will render strangely

"""
text
<<fff-display-block "test">>
text
"""

Renders like:

Text

One

text

I've tested this in a fresh wiki and received the same result. I would prefer there to be no padding but also retain the ability for my block quotes to show up. Since I can't use the "inline" mode, what can I do to remove the padding? I have tried looking at the transclude widget code but I am quite JS naive so I'm not really sure what I could do there.

Thanks,

-Reece

[TonyM]

Reece

Rather than transclude would this work?

{{!!$field$}}<br>

I don't think you need block mode if you add the break.

Regards
Tony

[Jeremy Ruston]

Hi Reece

I think that the transclusion is likely to be generating a <P> tag around the content “One”, and if so it could be the margin of that P tag that you’re seeing. Could you post a demo to tiddlyspot?

Best wishes

Jeremy

--
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+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/14ce1a47-1d65-4837-9014-f52e0fd3784c%40googlegroups.com.

[Mat]

You can use the browser inspector tool by right clicking on the result to see how it is html-structured and styled. You might want to redefine the padding in css, i.e by adding a stylesheet something like so:

title: $:/mystylesheet
tags: $:/tags/Stylesheet
type: text/css
text:
.thenameoftheclassthatyoufound {padding-top:0; padding-bottom:0}

<:-)

[Reece Shaw]

Hey Jeremy!

http://pharmayap.tiddlyspot.com/ here's the demo I posted, I think. Let me know if that works.

To Tony's question; that still leaves too much padding for my liking.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[Mat]

Reece Shaw wrote:

http://pharmayap.tiddlyspot.com/ here's the demo I posted, I think. Let me know if that works.

You can do this:

\define fff-display(field:"")

<$list filter='[is[current]has[$field$]]'>
<$transclude field="$field$" mode="block"/>
<

/$list>
\end

@@.myclass
"""
Text
<<fff-display "test">>Text
"""
@@

<style>
.myclass p { margin-block-end:0; }
</style>

Or, if you remove the """ then you can keep the macrocall and the subsequent line on separate rows.

I don't see a general way to have this always apply without explicitly adding a class to it.

<:-)

[Reece Shaw]

I don't know why it is but this solution doesn't seem to change anything about the text spacing after the transclusion.

[Mat]

Did you notice that it I moved the bottom "Text" like so:

Text
<<fff-display "test">>Text

and not

Text
<<fff-display "test">>
Text

<:-)

[TonyM]

Reece

Working with your demo I came up with this

\define fff-display(field:"")  
<$list filter='[is[current]has[$field$]]'>{{!!$field$}}<br>
</$list>
\end

Text<br>
<<fff-display "test">>
Text

Or alternatively this

\define fff-display(field:"")  

<$list filter='[is[current]has[$field$]]'>

{{!!$field$}}
</$list>
\end


"""
Text
<<fff-display "test">>
Text
"""

Regards

Tony

[Reece Shaw]

Yes, however there is still too much padding for my liking unfortunately. I'd prefer text text to be completely flush top and bottom, and the applied class doesn't appear to be doing anything. I fixed the double break on the bottom of the transclusion by utilizing the Bootstrap Grid system by rows, but I still run into the issue with the additional space.

Tony, it looks like text formatting markdown will work in the given scenario, but lists, numbered lists and quotes do not when the field value is "*test" or the like. I believe this is because the default transclusion code for {{!!}} is technically inline mode.

I've updated the demo with the different proposed solutions and can't figure out how to trim out the additional space on the top and bottom of the block quote. Any ideas?

http://pharmayap.tiddlyspot.com/

[Mark S.]

Have you tried:

.row ul {
margin-top: 0 ;
margin-bottom: 0;
}

yields ...

[TonyM]

Reece,

It seems to me odd that you are including markup in the field `"*''tester''`

This not the only thing that is confusing me, why are you wrapping it in triple Quotes?

To me unless you want to make use of specific features of wikitext and widgets in a field keep the data as clean as possible `tester`

Then the macro would be;

\define fff-display-transclude(field:"")

<$list filter='[is[current]has[$field$]]'>

*''{{!!$field$}}''<br>
</$list>
\end

text

<<fff-display-transclude "test">>

text

Observe the blank line after the list, I believe it is that that makes it block instead of inline but its not adequately documented here

Now you have the simplest way to represent the content, If I understand correctly you are unhappy with the space above and below the list item.

This is a result of what the "* means, it gets translated to this at render time

<ul>
<li>tester</li>
</ul>

If you remove the markup from the macro ie no ''*'' then this produces a similar result

text
<ul>
<li><<fff-display-transclude "test">></li>
<li><<fff-display-transclude "test">></li>
</ul>
text

even between two items there is a lot of space, including on Tiddlywiki.com

The point is you are trying to defeat the default behaviour for UL/LI spacing.

<style>
ul {
  display: block;
  list-style-type: disc;
  margin-top: 0em;
  margin-bottom: 0 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
</style>
text
<ul>
<li><<fff-display-transclude "test">></li>
<li><<fff-display-transclude "test">></li>
</ul>


text

*<<fff-display-transclude "test">>
*<<fff-display-transclude "test">>
text

The above could help you work out what you need to style

Then later create a css class or style and use the HTML alternative

<ul class="classname">
<li>''<<fff-display-transclude "test">>''</li>
</ul>

<ul style="margin-top: 0em; or whatever">
<li>''<<fff-display-transclude "test">>''</li>
</ul>

Regards

Tony

[Reece Shaw]

Aha! that does the trick. Didn't realize it was ul that I needed to change. Thank you!

On Saturday, March 7, 2020 at 9:23:07 PM UTC-5, Mark S. wrote:

Have you tried:

.row ul {
margin-top: 0 ;
margin-bottom: 0;
}

To your question Tony, I use an admittedly strange wiki structure that is front end user oriented. A lot of the wiki is designed around UI tiddlers that read "data tiddlers" that are system tiddlers with multiple fields and a naming structure consistent to the type of tiddler. It's difficult to explain, you can see a demonstration of this behavior here http://statme-pf2.tiddlyspot.com/ if you're curious.

If you use edit-text widgets on fields that are not the text field, they behave (basically) the same way that the text field does, including the ability to use ordered lists, call macros, etc. The one caveat is that the transclusion MUST be in block mode otherwise the ordered list and block quotes won't work. Its easy for my purposes. 

See the alchemical golem on that demo and click "edit" to see that in action. The $:/world/SRD/creature-template tiddler serves up the UI you see there.

Thank you all for your help!

[TonyM]

Reece,

Your welcome, Your wiki structure is not so strange to me, I tend to build things into the view template such that the tiddler has less and less in it, only the essential raw information remains, loading the tiddler fields and not the text field is my approach. The use of templates as well is helpful.

Yes I am familiar with the edit current tiddler issue and while I have some solutions that allow it, I am yet to feel confident in teaching someone else how to do it. There are cognitive somersaults needed to make this work. I continue to endeavor to try and find a way to provide a method anyone can use.

Your work looks great.

Keep on coding!

Tony