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
On Sunday, December 19, 2021 at 12:09:19 PM UTC-8 [email protected] wrote:
> 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/45e99dd0-6735-4c92-b25d-5527723d09f8n%40googlegroups.com.
