[tw5] [Help?] n00b: Example code: How-To: Using scrollable

Google Group (Read Only)
#1

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:

So - armed with that - the “best” I can think of is the following:

  1. Create a Tiddler: Top_1 ← with my instructions
    <$scrollable> Widget Content Outer Widget Content Inner </Inner div> </Outer div> </$scrollable> </scrollable frame>

Tags: none
Type: default
field: none

  1. Create a Tiddler: Top_1b ← The demo CSS
    .tc-scrollable-demo {
    border: 1px solid <>;
    background-color: <>;
    padding: 1em;
    height: 400px;
    position: relative;
    }

Tags: none
Type: txt/css
field: “class:” Value:“tc-scrollable-demo”

  1. 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”

  1. Create a Tiddler: Top_1d ← What I really need
    !scrollable frame
  • Outside Frame
Outside 1
Inside 1: <$scrollable class='tc-scrollable-demo'> Before Outer but inside Scrollable - before DIV
Widget Content Outer {{Completed_ToDos}}
Widget Content Inner {{Active_ToDos}} Inner:Done
{{Completed}} Outer: Done
Inside 1: DONE
Outside 1: DONE

,… and of course - the Frames does not limit the height.

Help?

Thanks

#2

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.

Scrollable Sample.json (395 Bytes)

#3

Thank You - Thank You - Thank You,…

I had no idea it what this simple - Soooo many site searched - looking and trying,…

  1. Create a New Tiddler: Example

  2. Copy and paste:

.tc-scrollable-demo { border: 1px solid <>; background-color: <>; padding: 1em; height: 300px; position: relative; }

<$scrollable class=“tc-scrollable-demo”>

{{Goals}}

</$scrollable>

Tag: none
Type: default
Field: none

  1. Test

Violla!

I’m wondering if there are others out there that stumbled as well - and unsure how to do this,…

It would be simple enough (I would think) to have this included in the https://tiddlywiki.com/static/ScrollableWidget.html page - as an example - but am not sure.

Thank You Again!

-JS2

#4

Good stuff !

If you had a whole bunch of “scrollable’s” throughout your TiddlyWiki, and if you wanted the same style for all of them, you could setup the style once in a style sheet tiddler or (better in my mind) setup a template tiddler, such that you could have:

{{Goals||scroll}}

That’s assuming all instances of scrolling are are the same.

If and when you are interested in that kind of thing, let me know.

Cheers !

#5

Ahhhh!

Wow - this is great!

Thanks!