How to independntly scroll tiddler body and floating viewtemplate on the right side

#1

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

#2

I am no expert but have you considered the CSS Units beginning with V for viewport?

#3

Instead of height you should use eg: max-height: 60vh for testing. … It will use 60% of vertical height of the screen. … Just for testing. You can adjust it.

BUT there will be a problem with

[data-tiddler-title='{{!!title}}'] .rightside {
  float: right;

Since it will overflow out of the [data-tiddler-title='{{!!title}}'] container DIV. So you need a “.clearfix” like so the STYLE of the sidetabs tiddler should look like this:

<style>
[data-tiddler-title='{{!!title}}'] .tc-tiddler-body {
  border:1px solid transparent;
  width:50%;
  overflow-y:scroll; 
  position:relative;
  max-height: 60vh;      <!-- define max vertical height -->
}
[data-tiddler-title='{{!!title}}'] .rightside {
  border:1px solid transparent;
  width:40%;
  margin-top: 0px!important;
  float: right;
  overflow-y:scroll; 
  position:relative;
  max-height: 60vh;   <!-- define max vertical height -->
	}

<!-- this is the float clearfix -->
[data-tiddler-title='{{!!title}}']::after {
  content: "";
  clear: both;
  display: table;
}
</style>

have fun!
mario

1 Like
#4

Thank you @pmario That works. I will do more testing when I get more free time. Since I use a wide screen monitor, rightside is very useful.

On a sidenote, do you remember this two tiddler story solution you created for me - I hacked it to open the second tiddler in a second column (using shiraz multicolumn storyriver CSS) - Check this wiki - https://sidetabs-wiki.tiddlyhost.com/