[tw5] Scrollable Sidebar Tabs?

Google Group (Read Only)
#1

Another style question - is there one place where I can make all the sidebar tabs scrollable, or does each tiddler tagged $:/tags/SideBar and $:/tags/MoreSideBar need to wrapped in a scrollable widget?

Thanks.

I think all of the sidebar tabs should be scrollable by default so the entire sidebar does not scroll out of view. Or maybe all of the SidebarSegments above the tabs should be fixed position.

#2

The attached is a sample of a scrollable More/All tab. Import it to tiddlywiki.com. I just think it it’s a better experience than having the entire sidebar scroll.

I think an issue might be what height do you set the scrollble part to? Could it be calculated from the existing sidebar-segments?

<$scrollable class=“tc-scrollable-demo”>
<$list filter={{$:/core/Filters/AllTiddlers!!filter}} template="$:/core/ui/ListItemTemplate"/>
</$scrollable>

(Attachment core_ui_more_all.json is missing)

#3

Thanks for Sharing I will test it out!

Tones

1 Like
#4

Here’s a bit of CSS to make all the sidebar tabs (and nested “more” tabs) scrollable without adding any $scrollable widgets at all:

  • Create a tiddler, tagged with $:/tags/Stylesheet, containing:
.tc-sidebar-lists .tc-tab-content 
   { max-height:60vh; overflow-x:visible; overflow-y:auto; }
.tc-more-sidebar .tc-tab-content
   { max-height:calc(60vh - 2em); overflow-x:visible; overflow-y:auto; }

Note that the height for .tc-more-sidebar uses calc(…) to subtract 2em so it accounts for the height used up by the main tabs and padding. Otherwise you get a double scrollbar display on the right side of the sidebars.

-e

3 Likes
#5

Since I can’t reply there, Eric Shulman posted a pure css solution onthe talk forum:

Thanks Eric!