[TW5] I got trouble with left-aligned block

[Дадаїст Дадаїстович]

Hi! I very like TiddlyWiki and I thak to Jeremy Ruston for this great one. But now I have some trouble when I want to create left-aligned block (div or table). 

Code of tiddler:

THIS IS NOT GOOD: 
@@float: right;
<pre>ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN</pre>
@@

View of tiddler:

Please, help me! 

Best regards

Mykola Janovych

[Eric Shulman]

On Thursday, February 20, 2014 3:22:06 PM UTC-8, Дадаїст Дадаїстович wrote:

Hi! I very like TiddlyWiki and I thak to Jeremy Ruston for this great one. But now I have some trouble when I want to create left-aligned block (div or table). 

Code of tiddler:

THIS IS NOT GOOD: 
@@float: right;
<pre>ONE
TWO
THREE
FOUR
FIVE
SIX
SEVEN</pre>
@@

View of tiddler:

You didn't say what specific trouble you are having... but, based on the picture you provided, I am GUESSING that you don't like the way the "float:right" content descends beyond the end of the tiddler and overlaps with the next tiddler.  However, this is exactly what "float:right" is intended to do: position content on the right and allow subsequent content to flow next to it (even if they don't word-wrap and cause overlap).

Assuming my guess is correct, and you want the current tiddler to completely contain the floating content before rendering the tiddler that follows it, then you need to add another block-level element that has the "clear:right" (or "clear:both") CSS applied to it.  In TiddlyWiki syntax (both TWC and TW5) you would write something like:

   @@display:block;clear:right;line-height:0px;@@

and place it immediately after the closing "@@" of your floated content.  In addition to the needed "display:block;clear:right;" CSS syntax, the use of "line-height:0px" ensures that this content doesn't actually add any whitespace at the end of the tiddler.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Дадаїст Дадаїстович]

Thank for your reply! I want to create right aligned table in tiddlywiki content with information purposes like in wikipedia (infobox). For example, infobox in this articles - http://en.wikipedia.org/wiki/TiddlyWiki . Please, help me!

Best regards,

Mykola Janovych

[Stephan Hradek]

Am Freitag, 21. Februar 2014 08:27:40 UTC+1 schrieb Дадаїст Дадаїстович:

Thank for your reply! I want to create right aligned table in tiddlywiki content with information purposes like in wikipedia (infobox). For example, infobox in this articles - http://en.wikipedia.org/wiki/TiddlyWiki . Please, help me!

Read about css, I think this should help ;)

Otherwise ask specific questions and maybe link to your non-working examples. This would help others help you.

[Julio Peña]

Mykola hello,

Try this...it may be close to what you are looking for.

@@float:right;display:block;background-color:lightgrey;border:1px solid darkgrey;padding:5px;

"""

ONE

TWO

THREE

FOUR

FIVE

SIX

SEVEN

"""

@@

Like Stephan has said before...please do study the CSS attributes and experiment alot!

Best regards,

Julio

[Julio Peña]

Now I see whats happening.....Stephan...with an unpopulated tiddler the Infobox falls off the edge so to speak.

Take a look at my test: http://jpentw5.tiddlyspot.com/ (Infoboxtest tiddler in "recent" tab).

Best regards,

Julio

[Stephan Hradek]

I do not see any problem if you follow CSS rules and add an element with "clear:both;"

@@clear:both;
&nbsp;
@@

[Julio Peña]

Although I was trying to help Mykola I wanted also to find out myself.

On my behalf many thanks Stephan...that was the bit I was trying to figure out.

I knew I had to add something and knew how to do it in Tiddlywiky Classic with the ((clear{ }}} syntax but somehow I just froze.

Best regards,

Julio

[Eric Shulman]

On Friday, February 21, 2014 9:03:04 AM UTC-8, Julio Peña wrote:

On my behalf many thanks Stephan...that was the bit I was trying to figure out.

I knew I had to add something and knew how to do it in Tiddlywiky Classic with the ((clear{ }}} syntax but somehow I just froze.

On Friday, February 21, 2014 11:32:21 AM UTC-5, Stephan Hradek wrote:

I do not see any problem if you follow CSS rules and add an element with "clear:both;"
@@clear:both;
&nbsp;
@@

As I noted in my response, you can place this immediately following the closing "@@" of your floated content:

   @@display:block;clear:right;line-height:0px;@@

* The 'clear' attribute can have one of three values: "right", "left", or "both".

* The element MUST be block mode (thus "display:block")

* To avoid adding extra whitespace at the end of the tiddler, set "line-height:0px"

* There is no need to use multiple line syntax or embed 'placeholder content' like "&nbsp;"

[Stephan Hradek]

Am Freitag, 21. Februar 2014 18:09:23 UTC+1 schrieb Eric Shulman:

As I noted in my response, you can place this immediately following the closing "@@" of your floated content:

   @@display:block;clear:right;line-height:0px;@@

We even don't need that.

Create a CSS tiddler containing:

div.tw-tiddler-frame.tw-tiddler-exists:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Then any float inside a tiddler will stay in the tiddler.

[Danielo Rodríguez]

Nice

Thank you very much.

It works flawlessly for HTML tags. But, did you tried with wikitext? for example triple backticks (```) ignores the floating.