G'day, Just as a reference point for discussion:
Download the attached, drag into TiddlyWiki.com for import, and take a look
at the "Scrollable Sample" tiddler.
On Sunday, December 19, 2021 at 3:38:55 PM UTC-4 JS2 wrote:
> Hi,
> I am new to TiddlyWiki - and have searched the last couple of days on the
> basic usage - with not much luck on actually "how" to use the scrollable -
> seriously - no actual examples.
>
> Issue:
> * I have a table - and display {{ToDo's}} within a cell - but do not know
> how to use "scrollable"
> * I need to limit the width, height and font-size for my {{ToDo's}} in the
> cell.
>
> This is the best I found:
> * https://tiddlywiki.com/static/ScrollableWidget.html
>
> So - armed with that - the "best" I can think of is the following:
>
> 1. Create a Tiddler: Top_1 <-- with my instructions
> <scrollable frame> <$scrollable> <Outer div> Widget Content Outer <Inner
> div> Widget Content Inner </Inner div> </Outer div> </$scrollable>
> </scrollable frame>
> Tags: none
> Type: default
> field: none
>
> 2. Create a Tiddler: Top_1b <-- The demo CSS
> .tc-scrollable-demo {
> border: 1px solid <<colour message-border>>;
> background-color: <<colour message-background>>;
> padding: 1em;
> height: 400px;
> position: relative;
> }
> Tags: none
> Type: txt/css
> field: "class:" Value:"tc-scrollable-demo"
>
> 3. Create a Tiddler: Top_1c <-- The demo Scrollable code example
> <$scrollable class='tc-scrollable-demo'>
> <$list filter='[!is[system]]'>
>
> <$view field='title'/>: <$list
> filter='[all[current]links[]sort[title]]' storyview='pop'>
> <$link><$view field='title'/></$link>
> </$list>
>
> </$list>
> </$scrollable>
> Tags: none
> Type: none
> Field: "class" Value: ".tc-scrollable-demo"
>
> 4. Create a Tiddler: Top_1d <-- What I really need
> !scrollable frame
> * Outside Frame
>
> <div>
> Outside 1
> <div>
> Inside 1:
> <$scrollable class='tc-scrollable-demo'>
> Before Outer but inside Scrollable - before DIV
> <div> Widget Content Outer
> {{Completed_ToDos}}
> <div> Widget Content Inner
> {{Active_ToDos}}
> Inner:Done
> </div>
> {{Completed}}
> Outer: Done
> </div>
> </$scrollable>
> Inside 1: DONE
> </div>
> Outside 1: DONE
> </div>
>
> ,... and of course - the Frames does not limit the height.
>
> Help?
>
> Thanks
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/b85da414-a7fe-4aae-9931-2c461777d0cen%40googlegroups.com.
Scrollable Sample.json
Description: application/json
