Couple HR Formatting tricks and a Question on Columns

[Aidan Grey]

I know a few other people have searched for how to do these, because I found them while I was looking for how to do it. 

An Inline HR

This one, I never saw a good answer to, not even on pro CSS blogs. Here's what I found:

/!-- <span style="display: inline-block; margin-left: 10px; border-bottom: 1px solid; vertical-align: middle; width: 200px; ">Your Title In Here</span><br>  --/

<span style="display: inline-block; margin-left: 10px; border-bottom: 1px solid; vertical-align: middle; width: 200px; ">Your Title In Here </span><br>

(I think that will appear with code and an example, but dunno for sure)

Getting a complete overflow:hidden or dynamic width sort of line still seems impossible, but this gets me most of the way and looks the way I want

Adding an HR immediately Below Titles

I think I saw an answer somewhere, but it was hard to find, so here it is again:

/!-- <hr style="border-top: 5px double #1b3418;"> --/

1. Add to a  tiddler and style as you like

2. tag with $:/tags/Stylesheet 

3.add field: list-after, value = $:/core/ui/ViewTemplate/title

4. and you're good to go.

Question on Columns

I created classes for column formatting in different counts (from 2-8, 2 columns, 3 columns, etc, with all formatting in one tiddler, one after the other), like this:

/* SIXCOLUMN MODE */
.sic {
   display:block;
   -moz-column-count: 6;
   -moz-column-gap:1em;
   -webkit-column-count: 6;
   -webkit-column-gap:1em;
}




My issue - after 4, they don't seem to actually format into columns. I have a six item list I wanted to appear as a 6-bank column, but it only appears as 3 columns, no matter how wide the window is (and I'm using double monitors, so it's pretty wide). Here's how I called it:

@@.sic

[[Vowels]]<br>

[[Stops]]<br>

[[Nasals]]<br>

[[Liquids]]<br>

[[Sibilants]]<br>

[[Glides]]<br>

@@

Am I doing something wrong (very likely), or is there an inherent limitation of some kind?

Thanks,

Aidan

[Mat]

I created this stylesheet for columns just shortly ago. maybe it can help.

<:-)

[Aidan Grey]

Ooh, it looks like it will! Now I have to go tiddle a bit.

[PMario]

Hi,

I also did play with multi columns for TW dropdowns, based on flex-grid CSS settings. It's based on a blog post.

have fun!

mario

[Aidan Grey]

Thanks Mario! I am actually using your plugin for a couple of my TW right now.

My problem was solved once I used column-count instead of the WebKit code.

--
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+unsubscribe@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/bdc04f37-e2fa-41ab-bafd-7668941f6235%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.