On Monday, September 7, 2015 at 5:59:07 AM UTC-4, Ton Gerner wrote:
>
> Hi Graeme,
>
>
>> I tried throwing together this code with Transcluded tiddlers:
>>
>> /*COLUMNS*/
>>>
>>> .twocolumns { display:block;
>>>
>>> column-count:2;
>>>
>>> -moz-column-count:2;
>>>
>>> -webkit-column-count:2;}
>>>
>>>
>>>> .threecolumns { display:block;
>>>
>>> column-count:3;
>>>
>>> -moz-column-count:3;
>>>
>>> -webkit-column-count:3;}
>>>
>>>
>>>> .fourcolumns { display:block;
>>>
>>> column-count:4;
>>>
>>> -moz-column-count:4;
>>>
>>> -webkit-column-count:4;}
>>>
>>>
>>>> .fivecolumns { display:block;
>>>
>>> column-count:5;
>>>
>>> -moz-column-count:5;
>>>
>>> -webkit-column-count:5;}
>>>
>>>
> In case of text in a tiddler use:
>
> @@.threecolumns
> All text to be displayed in three columns
> @@
>
> In case of transclusion use:
>
> @@.threecolumns
> <div>
>
> {{Tiddler to be transcluded}}
>
> </div>
> @@
>
I tried doing something like that earlier, but it wasn't giving me the
results I was looking for. I was able to cobble something together through
trial and error that more or less achieves what I was looking for, but the
code looks jacked up and it will likely break on different screens:
https://drive.google.com/file/d/0B8oiLzPSpgM6T0laa0hRaFY4LTA/view?usp=sharing
My StyleSheet looks like this:
/* custom styles for parallel columns. Classes cola and colb */
.ha {
display:inline-block;
width:30%;
overflow:auto;
}
.hb {
float:right;
width:40%;
}
.hc {
float:right;
width:30%;
}
.cola {
display:inline-block;
width:30%;
overflow:auto;
}
.colb {
float:right;
width:40%;
}
.colc {
float:right;
width:30%;
}
.clearfix {
overflow: auto;
}
and my page code looks like this:
@@.ha
!!Helpful Links
@@
@@.hc
!!Department & Office Info
@@
@@.hb
!!Labeling Process
@@
@@.cola
First column List goes in here
@@
@@.colc
Third column List goes here
@@
@@.colb
Middle column List goes here
@@
There were a few problems when I tried transcluding multiple tiddlers, but
mostly it would just dump them all in one big list and not distribute
anything across columns. I had to break apart the headings from the Lists
themselves because the List and Heading wouldn't play nice together and it
would put the Heading in one column and then move the list to the next
column. I had to do column .cola as a display:inline-block because if I
tried to do float:left on it, all the lists would overflow outside of the
tiddler box/container/thing (that overflow:auto part didn't seem to do
anything). So everything I have in there just happened to work on my
screen, but I know it won't work on other screens and ideally I'd like to
do transclusion if that's more effecient, but I just don't know enough of
CSS coding to know how to go about that. At some point even I'd like to
change out alot of these text links and make it a bit more visually
appealing with small buttons on a grid (while still maintaining these same
column groupings), but that's a bit further down the road.
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/f78d2828-27c6-4a3e-8134-f98a4a96ed9b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
