Hello
Please can someone tell me if it is possible for the horizontal scroll bar that appears at the bottom of long tiddler to be positioned at the bottom of the screen.
I have imported a large csv file and it is awkward to scroll across to see values near the top off the tiddler which are off to the right.
Cheers, Rob
It should be easy, but something seems to be broken a bit.
When I drop in a 1000-record csv, the output table is wrapped in a <div>, which is wrapped in another <div>, which has style="overflow:auto" hardcoded in it. I’m not sure where to go to fix that. If you change it in the developer console, to style="overflow:scroll; height:600px" then it works as I think you would like.
But we can’t use stylesheets to override the value set in an attribute. So we’d need to find what code is creating that <div>. And I’m not sure where to go to find that.
Many thanks for your reply. I am not familiar with the workings of the developer console and could not find the line of code to which you referred.
Let’s see if a wizard comes along!!
Rob
One ideal option (in my view) would be to display both top and bottom scrollbars if a tiddler is longer than the current view window and or in number of lines. I am confident a CSS wizzard could do this.
I can’t think of a way to do that in CSS. Which doesn’t mean there isn’t one.
But if you don’t mind limiting the height of the viewable table area, you can add one line of CSS that should fix it, at least for the tables as created from a text/csv tiddler:
div:has(>table.tc-csv-table) {height:40em; overflow: scroll;}
You can set the height value to your liking
ScrollCsvTable.json (206 Bytes)
For this kind of use-case, I prefer using max-height and vh (viewport height) units; that way, the height of the table will always fit within the current browser window size, but if it is a small table, it won’t take up any more room than needed.
For example:
div:has(>table.tc-csv-table) { max-height:80vh; overflow: scroll; }
-e
Good point. I was afraid that this wouldn’t even work for the OP as I didn’t know how the tables were built, and this will likely only work with the built-in CSV renderer. But I still should have taken this into account in my answer.
I am also still bothered by the <div style="scroll: auto"></div> that’s generated, wrapping this table. If there didn’t happen to be another <div> nested between them, there would have been nothing at which to target this CSS. I haven’t really tried to find the source, but I think that’s ripe for a fix. It’s pretty rare, is it not, that TW uses inline styles?
Perhaps it comes from the $scrollable widget that the table is wrapped in by the CSV parser module?
see $:/core/modules/parsers/csvparser.js. Note this comment:
Yes, I went that far, but didn’t dig into the $scrollable widget. If that’s the culprit, I will see if I can get a fix for it.