Reduce width allowed for Table of Contents left side (links)

54 views
Skip to first unread message

S. S.

unread,
Dec 31, 2018, 12:36:07 AM12/31/18
to TiddlyWiki

On the tiddlywiki.com website, if I make a tabbed internal Table of Contents as follows:

<$macrocall
    $name="toc-tabbed-internal-nav"
    tag="Learning"
    selectedTiddler="$:/temp/toc/selectedTiddler"
    unselectedText="
<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>"
    missingText="
<p>Missing tiddler.</p>"
/>

Some long  titles cause the left side to take up half the width of the tiddler, leaving too little space to display tiddler contents on the right side.

I want to change (reduce) the width allowed on the left-side index of links.

I found the place in the CSS tiddler $:/themes/tiddlywiki/vanilla/base that allows the width to be changed:

.tc-tabbed-table-of-contents .tc-table-of-contents {
        z
-index: 100;
        display
: inline-block;
        padding
-left: 1em;
        max
-width: 50%;
       
-webkit-flex: 0 0 auto;
        flex
: 0 0 auto;
        background
: <<colour tab-background>>;
        border
-left: 1px solid <<colour tab-border>>;
        border
-top: 1px solid <<colour tab-border>>;
        border
-bottom: 1px solid <<colour tab-border>>;
}

I want to change the value max-width: 50%; by perhaps using a field value in a ToC tiddler, like width with a value of: 30%
or using a class field

I do not want to modify the $:/themes/tiddlywiki/vanilla/base tiddler , nor the ToC Macros in $:/core/macros/toc

How might I accomplish this?

Wishing all a dynamic, productive, rewarding year ahead!

Mark S.

unread,
Dec 31, 2018, 2:07:03 AM12/31/18
to TiddlyWiki
Tag your tiddler "Test". Create a stylesheet tiddler (a tiddler tagged $:/tags/Stylesheet):

[data-tags~="Test"] .tc-tabbed-table-of-contents .tc-table-of-contents {
max
-width: 30% ;
}

That should change the max-width. I think you can see how to change "Test" to some other tag name, if you prefer.

Good luck
-- Mark

S. S.

unread,
Dec 31, 2018, 4:07:03 AM12/31/18
to TiddlyWiki
Mark,

I must have been in a parallel universe for some hours. I thought I tried that - and it didn't work over there!
It works now 😉

Thank you for bringing me back to this world.

Regards
Reply all
Reply to author
Forward
0 new messages