How to float the output of a ViewTemplate next to other body content?

#21

Hey Scott,
with this code you can show the comment (txt) at the right side of the tiddler, after the number of the sidenote.
I want to screen this sidenode , also the comment (txt) inside the tiddler, exactly where your panel in the example show the tree field by transclusion.

Initially there is the following CSS with it.

.comment:hover .sidenote {
background-color: yellow;
}input.margin-toggle {
display: none;
}label.sidenote-number {
display: inline;
}label.margin-toggle:not(.sidenote-number) {
display: none;
}.sidenote,
.marginnote {
float: right;
clear: right;
margin-right: -40%;
width: 30%;
margin-top: 0.3rem;
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.3;
vertical-align: baseline;
position: relative;
}.sidenote-number {
counter-increment: sidenote-counter;
}.sidenote-number:after,
.sidenote:before {
font-family: et-book-roman-old-style;
position: relative;
vertical-align: baseline;
}.sidenote-number:after {
content: counter(sidenote-counter);
font-size: 1rem;
top: -0.5rem;
left: 0.1rem;
}.sidenote:before {
content: counter(sidenote-counter) " ";
font-size: 1rem;
top: -0.5rem;
}

Best

1 Like
#22

I think I see what you’re doing with the CSS, but I would love to see an example if you have one online.

#23

Hey Scott,

Ok i found it. I just use the CSS of the post-it Side, that solves my wish here.
Thanks

1 Like