[TW5] Prevent Transclude block mode from inserting space above and below.

[Mat]

This demo illustrates the problem; there is extra space inserted above and below a transclusion (not just new row).

What is the reason for this in the transcludewidget and is it possible to prevent it?

I suspect this is the same phenomenon we have with single line breaks not working, but in that case it is possible to circumvent it using <br>.

Surrounding the transclusion with css does not help (other than dirty tricks like "margin-top:-1em;" to manually move the block).

Attempting to peek at the codes unfortunately didn't help me - but I'm thinking there ought to be some place where the CSS display property values "block" and "inline" are used, considering how these are titled exactly like the transcludewidget mode attribute values.

What to do? Grateful for any help. It is intended for a total rework of the CherryPicker expanding the concept tremendously (see "Extending the concept").

<:-)

[Jeremy Ruston]

Hi Mat

I'm on my phone and so can't check your demo properly, but I think the extra space is caused by (a) the fact that a block mode transclusion creates paragraphs and (b) the fact that the default stylesheet adds a margin above and below paragraphs.

In situations like this where you care about the output HTML I'd recommend using the browser developer tools to inspect the generated HTML. In this case you should be able to see the <p> tag(s) that are wrapped around the transcluded content.

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

http://jermolene.com

--
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 post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/07cc8537-0ded-4d22-bf44-512c1bc870de%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mat]

NO WAY!!! That solves it!!! Thank you!!! I've had this problem forever but just accepted it - until now when I felt the result was too poor for a public creation. Since it is so easily solved, could we not for transcludewidget introduce e.g an "inline-block" value or better yet a class property?

And thanks for super fast reply!

For the record; 

<span class="xx"><$transcludewidget ... mode="block"/></span> 

 

<style>
.xx p {display:inline-block;}
</style>

<:-)

[PMario]

Hi Mat,

The first example, does exactly what you programmed. Probably not what you think it would do.

The tiddler AAA conatains a paragraph - a list - a table - a paragraph

The default style sheet adds some margin above and below the pragraph. ... So the transclusion doesn't cause any additional space. It's all in tiddler AAA.

it's the exact same __visual__ result as.


111

text

* list 
* asd

|aaa|bbb|

text

111


111 doesn't produce a paragraph, in your code. but the "text" does, which creates the spacing. .. As Jeremy said. Have a look with the dev tools, and you'll see, what's created. ...

 ... If you want a different behaviour, your CSS would need to be changed. ... But if you optimize it for one special edge case, you'll probably break the default behaviour and vice versa. ...

-mario

[Josiah]

two  small points on this where I actually have some competence ...

1) treat it as a CSS issue in the first instance

2) treat it as a CSS issue in the second instance :-)

J, x

[PMario]

On Sunday, June 19, 2016 at 2:58:09 PM UTC+2, Josiah wrote:

two  small points on this where I actually have some competence ...

1) treat it as a CSS issue in the first instance
2) treat it as a CSS issue in the second instance :-)

:) Yea, that's the problem here.

TiddlyWiki is more like a general purpose word processor, but CSS was developed for html pages, where you have the possibility to adjust your CSS for just "one" page. SPAs need a bit more attention, but are still not that powerful as the TW transclusion method, where you can transclude any content into a completely different context. .. So designing fully "nestable" CSS, that covers all the edge cases is difficult.

-m

[Josiah]

Its a VERY interesting case.

I absolutely do not want my STYLING messed up by my TRANSCLUSION.

The later is logical. The former is display. I need them INDEPENDENT.

Take the case of  wanting three transcluded (i.e RELATED) Tiiddlers. 1 - Data on a film. 2 - One or more videos showing clips from that film. 3 - Several Tweets about that film.

A - ALL THREE forms I want to format differently.

B - ALL I want to transclude in order 1,2,3.

Are A & B stylistically in CONFLICT?

Josiah

[Mat]

@PMario, thanks for clarifications.

<:-)