Double vertical scrollbar

#1

Hello,

I love the concept of TW, but for some reason (maybe it’s just me) the double vertical sidebar is not really appealing.

While looking for a solution I found the following issue (2014): Double vertical scrollbar with default layout · Issue #1282 · TiddlyWiki/TiddlyWiki5 · GitHub

It appears this is still not fixed.

Are there any possible workarounds that work without side effects?

Thank you

#2

Give this a try: TiddlyTools/Stylesheet/TopBar

To install, just visit the TiddlyTools link shown above and drag-and-drop the title of that tiddler into your TiddlyWiki. It contains only pure CSS and wikitext (i.e., no Javascript), so it will take effect as soon as you import it… and, if you don’t want it anymore, just delete that tiddler and all will immediately revert to the normal topbar/scrollbar handling.

This hybrid stylesheet/control panel tiddler adds several nice features to your TiddlyWiki page:

  • You can pin/unpin the “top bar” toolbar
    • handles both TWCore’s standard .tc-topbar and MenuBar Plugin’s .tc-menubar
    • when “pinned”, two “push pin” icons will appear in the upper-left and upper-right corners of your page
    • when “unpinned”, the icons change to “up+down arrows” and the top bar slides up out of the way until you move your mouse near the top corners of the page
  • You can also set the scale factor for top bar content (default size=1). Decimal values (e.g., “1.5”) are permitted.
  • The stylesheet also prevents the StoryRiver “scroll-under” effect (where StoryRiver content overlaps and disappears under the top bar when scrolling)

and… most relevant to your question:

  • The stylesheet places the StoryRiver scrollbar directly to the right or left of the StoryRiver content (i.e., not next to the sidebar scrollbar), thereby avoiding the “double vertical scrollbar” problem you mentioned.

Once installed, you can configure the top bar options (including the Story River scrollbar position) by viewing the $:/ControlPanel > Settings > TopBar tab. Alternatively, for quicker access you can simply ctrl-click on either pin icon and a “Setup TopBar” popup will appear.

In addition to the Control panel “pin TopBars” checkbox, you can also quickly toggle that setting just by clicking on either pin icon. To re-pin the top bar, move the mouse over the upper-left or upper-right corner of the page. The “up+down arrows” will slide into view. You can then click on either icon to toggle the “pin TopBars” setting.

enjoy,
-e

#3

@EricShulman … That’s interesting. Which CSS setting exactly is responsible for the story river scrollbar. I would be interested in this setting but only this setting.

#4

@Chris_De_Boeck

I’m sure Eric’s solution encompasses the problem area. You should very probably go that route.

However, I use an opinionated CSS solution that suits my specific needs.

HTML {
  overflow:hidden !important;
}

BODY.tc-body.tc-body {
  height:100vh;
  overflow:auto;
  overflow-x:hidden;
  scrollbar-color:transparent transparent;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
}

To try it, place the code above in a tiddler called, for example, my-tw-overrides, give it the tag $:/tags/Stylesheet and save the tiddler.

First, I prevent scrolling on the root HTML element completely and control “global scroll” via the body element.

overflow-x:hidden;
I never need to scroll my wiki left/right.

For the body element…

scrollbar-color:transparent transparent;
Essentially, this “hides” the scrollbars on the body element. I don’t need to see them because I always use the mousewheel and never drag the slider/thumb.

scrollbar-gutter:stable;
overflow:auto;
Together, these stop the the geometry of the body element changing when the scrollbar appears and disappears during normal use.

scrollbar-width:thin;
Even though the scrollbars are hidden via transparency, they are still present. This setting reduces the amount of space they take up.

1 Like
#5

Here’s a simplified way to put the scrollbar next to the StoryRiver, without using my TiddlyTools stylesheet:

Edit $:/core/ui/PageTemplate/story, and replace the first line:

<section class="tc-story-river" role="main">

with

<style>
.tc-page-container { height:100vh; overflow:hidden; }
.tc-story-river { max-height:calc(100vh - 2em); margin-top:2em; }
.tc-story-river { direction:rtl; }
.tc-story-river > * { direction: ltr; }
</style>
<$scrollable class="tc-story-river">

then, replace the last line

</section>

with

</$scrollable>

Notes:

  • .tc-page-container { height:100vh; } prevents the overall page from exceeding the window height, which would add an unneeded scrollbar since all scrolling will now occur directly in the tc-sidebar-scrollable and .tc-story-river elements
  • .tc-story-river { max-height:calc(100vh - 2em); margin-top:2em; } forces a scrollbar to appear when the StoryRiver exceeds the window height, and makes room for the scrollbar arrows to be displayed.
  • .tc-story-river { direction:rtl; } causes the scrollbar to appear on the left side of the StoryRiver
  • .tc-story-river > * { direction: ltr; } reverts the text flow direction for content within the StoryRiver
  • If you don’t want the scrollbar on the left, just omit the last two CSS rules.
  • There’s some minor margin/padding differences from the TWCore default styles (for example, the left scrollbar takes up room, pushing the StoryRiver content a bit to the right), but IMO they aren’t critical, so I’ll leave it up to you to experiment with adjustments to suit your taste.

-e

#6

@EricShulman – Thanks a lot.

It was not obvious to me how you made it happen to have the scrollbar on the left. Using ltr is genius. I would have never thought about that one.

#7

As a result of this discussion thread, I have just updated TiddlyTools/Stylesheet/TopBar to add a <<startup>> macro that is invoked automatically via $:/tags/StartupAction/PostRender processing.

This <<startup>> macro modifies the $:/core/ui/PageTemplate/story shadow tiddler to change all instances of <section ...> to <$scrollable ...> and fixes a long-standing deficiency in TiddlyTools/Stylesheet/TopBar which prevented TWCore “scrollTo” handling when navigating to a tiddler that is open in the StoryRiver, but not currently in view.

Note that this automatic modification is only performed if the $:/core/ui/PageTemplate/story tiddler has not been previously edited (i.e., it is an actual shadow tiddler). This avoids any conflict with other 3rd-party add-ons that may have already altered the $:/core/ui/PageTemplate/story tiddler.

For the technically-minded, here’s what the newly-added macro definition does:

\define startup()
<$list filter="[[$:/core/ui/PageTemplate/story]!is[tiddler]]">
<$action-setfield text={{{ [{!!text}search-replace:g:regexp[section],[$scrollable]] }}}/>
\end

enjoy,
-e

#8

There are side-effects to applying the properties of the $scrollable widget, most notably, pointer-events associated with scrolling and (though I’m not sure or convinced yet) perhaps even the stacking context. Let me explain:

I have a checkbox which renders on draft tiddlers. The checkbox adds a tag “edit-wide”. When that tag is present, the edited tiddler is rendered “double width” (great for system tiddlers).

/* make draft tiddlers extra wide if tagged edit-wide */
div.tc-tiddler-frame.tc-tagged-edit-wide[data-tiddler-title*="Draft of"] {
 width:<<MAIN-VIEW-WIDTH>>;
 z-index:1201;
}

When I edited my $:/core/ui/PageTemplate/story and changed <section> elements to $scrollable widgets, I lost the ability to use the edit-wide tag successfully. When the tiddler became double wide, the extra width which normally appears above the sidebar, disappeared under the sidebar making the tiddler controls inaccessible. (Scrolling the tiddler to the right made them accessible.) And note, the z-index failed, too.

When I reverted the change back to <section>, the problem disappeared. I spent a couple of hours trying to find a way to make it work but failed – hence my diagnosis above. There’s “baggage” here that is not obvious or readily reconcilable.

Regarding mitigation, this, of course, was a wise move, Eric…

Kudos.

#9

Try using this “extra-wide” stylesheet definition:

<$list filter="[tag[edit-wide]is[draft]limit[1]]">
.tc-page-container, .tc-story-river
   { height:auto; direction:ltr; overflow:visible !important; }
div.tc-tiddler-frame.tc-tagged-edit-wide[data-tiddler-title*="Draft of"]
   { width:<<MAIN-VIEW-WIDTH>>; z-index:1201; }
</$list>

Note that the $scrollable widget automatically adds overflow:auto; directly to the .tc-story-river element, so overflow:visible !important is needed to override it.

This should override the scrollbar-related styles added by TiddlyTools/Stylesheet/TopBar whenever any tiddler is tagged with edit-wide, thereby allowing those tiddlers to overlap on top of the sidebar as you want them to.

Two other temporary side-effects of this CSS will be:

  • The StoryRiver scrollbar position will revert to the default TWCore right side position
  • When scrolling the StoryRiver, tiddlers can overlap with and will scroll under any TopBar/MenuBar display.

Let me know how it goes…

-e

#10

Perhaps I should have made it clear, I’m not using your topbar – I’m managing my own $:/core/ui/PageTemplate/story independently.

I’ll try your approach above though.

#11

If your customized $:/core/ui/PageTemplate/Story is using <$scrollable class="tc-story-river"> in place of <section class="tc-story-river" ...>, you may not need all of my suggested CSS, but you will still need to use at least:

.tc-story-river { overflow:visible !important; }

to overide the overflow:auto; that the $scrollable widget automatically applies directly to the .tc-story-river element.

-e

#12

Same issue, I’m afraid. The rhs of a “wide” tiddler is chopped off by the Sidebar. :frowning:

We’ve already taken this thread way off-topic and I’ve spent far too much time on a minor problem I don’t need to deal with right now.

But thanks for your help, Eric. I may start a new thread at some point down the road.

Reminder to me: the real/actual problem we were meant to be addressing was stated by Eric here:

1 Like
#13

That doesn’t work for me, although your TiddlyTools stylesheet does. I get the left scrollbar for the story river but still get two on the right, when the sidebar has enough content displayed:

image

The larger one is almost full, as though there’s just a small bit of content not in the viewport.

Chrome 131/Windows 11 Enterprise. I’ll check Brave on Windows and Ubuntu from home later.

#14

Add this to the previously suggested CSS:

.tc-page-container { height:100vh; }

-e

#15

You might find that’s the HTML element itself:

image

#16

Is this what we may call a “hot patch”?

#17

Thank you for your solution, but I still have the same problem as “Scott_Sauyet”. Now I have 3 scrollbars :slight_smile:

#18

Did you use the “simplified” modification of $:/core/ui/PageTemplate/story tiddler, or did you import a copy of my TiddlyTools/Stylesheet/Topbar?

Can you post your TiddlyWiki somewhere that I can try to debug the issue?

If it has private info, perhaps you can create a “minimal test case” that still illustrates the problem without your info.

Alternatively, we could arrange to meet live via a “voice channel” on the TiddlyWiki discord server so you could screen share and I can walk you through debugging it. (see https://tiddlywiki.com/#TiddlyWiki on the Web for a link to the Discord server invite)

-e

#19

You can download and drag this onto tiddlywiki.com, then open almost any of the more sidebar tabs:

$__core_ui_PageTemplate_story.json (936 Bytes)

I had the same experience in Brave/Ubuntu last night. I didn’t get to testing on Windows at home.

I haven’t spent any time debugging this, and likely will not before the weekend, but I will then if you can’t spot it quickly.

#20

Try this:

.tc-page-container { height:100vh; overflow:hidden; }

-e

1 Like