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

[JS2]

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

[Charlie Veniot]

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.

[JS2]

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:

<style>

.tc-scrollable-demo {
        border: 1px solid <<colour message-border>>;
        background-color: <<colour message-background>>;
        padding: 1em;

        height: 300px;
        position: relative;
}
</style>

<$scrollable class="tc-scrollable-demo">

{{Goals}}

</$scrollable>

Tag: none

Type: default

Field: none

3. 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

[Charlie Veniot]

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 !

[JS2]

Ahhhh!

Wow - this is great!

Thanks!