In this wiki, check the tiddler in the home page.
Use shortcut Alt+A or click the core info button on the right upper part of the tiddler (not the viewtoolbar button) to open a sidetab on the right side of the tiddler body.
I want tiddler body and this sidetab on the right side of the tiddler body to scroll independntly. This tiddler contains the relevant code.
<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
border:1px solid transparent;
width:50%;
overflow-y:scroll;
position:relative;
height: 900px;
}
[data-tiddler-title='{{!!title}}'] .rightside {
border:1px solid transparent;
width:40%;
margin-top: 0px!important;
float: right;
overflow-y:scroll;
position:relative;
height: 900px;
}
</style>
This one works when the tiddler body contents are long, but if the tiddler body is short, the tiddler still shows 900px height (I know that this happens because I have set it like that. I have set the height at 900px because that is the only way it was working fine). Can anyone suggest a better CSS solution ?
I was using the code from these references
https://www.codeply.com/go/KFAx8cHcN6/bootstrap-independent-scrolling-columns