Hi. I’m finding that although I have a top padding on my “river”, when a new tiddler is navigated to, that padding is ignored, such that it appears “higher” on the screen and closer to the top of the browser window than I would prefer. I’m wondering if this is a setting controlled by the Javascript, rather than CSS.
Hi Jennifer
The behavour I can see is that when I populate the story river with a fresh collection of tiddlers then there is a gap at the top but when I click on a link then yes the tiddler that is scrolled to can appear at the very top of the window with no gap.
I am using the word gap to cover padding or margins of any element that result in visual space between tiddlers and themselves or tiddlers and the top of the window.
I see using my browser inspector that tiddlers have a class tc-tiddler-frame which has a margin-bottom - in my case of 38px. So after the first Tiddler the inter-tiddler “gaps” are handled by that.
As far as the first displayed tiddler goes it will have no gap of it’s own with respect to the top of the window but it is contained within a section element and that has a top padding which results in a gap when the section is left unscrollled.
As soon as a scroll occurs then when I use my browser inspector to colour the section element padding then of course I can watch the top padding owned by the section element being scrolled out of view - that is as expected.
It would seem in your case you need to find an appropriate container (div or other) higher up to add a gap to - one that is not affected by the scroll.
Playing around in my browser inspector I added padding-top to the containing iframe that has id #tid-main-wiki-file-viewer and indeed that achieves a static gap at the top which might be what you want*.
If user browser developer tools then it’s probably a good idea to playaround changing the CSS experimentally to see if you can achieve what you want.
*But is it what you want?..
As far as I can see the issue you have is that any fixed padding will always be there and will contribute to the overall top gap in all situations so it’s unlikely that you will achieve a constant visual gap - some of the time according to the scroll a tiddler bottom margin will appear contiguous with whatever additional fixed gap you introduce and sometimes it will not - whenever you scroll elements with gaps that scroll against a non-scrolling container with padding or margins this will occur.
I think some people would consider the current situation natural - however large the gaps you leave between paragraphs in a word processor any scrolling will risk the first displayed paragraph having no top gap unless the surrounding fixed container has a constant padding or margin.
Thank you @jonnie45 for your response. I think I see what you are saying. I will take your insights with me when I approach the design again. The issue seems to be finding a way to create a “bumper” that does not overly inflate the default space between tiddlers, which is I think, as you suggest, driven by the padding on the tiddler frame class.
@pmario I am not sure you would see this on tiddlywiki.com unless it was a TW that has an adjustment to the layout that gives the default view of both the sidebar and the river a significant amount of white space at the top of the browser window. You can see it on my site: Jennifer's Notebook — Hypertext, realized
It’s a very fine point indeed and I will continue to play with it.
Update: I found this in the documentation:
https://tiddlywiki.com/static/Hidden%20Setting%3A%20Scroll%20Top%20Adjustment.html
There’s a provision in the scroll code to look for an element named “.tc-adjust-top-of-scroll” as part of the tags/pagetemplate cascade. If it finds an element of that class, it will offset its scroll to destination by that element’s height. Perfect!