Help needed with float right CSS to align the template at the same level of the tiddler body

https://sidetabs-wiki.tiddlyhost.com/

In the home page of this wiki, you can see a lyrics template which I float to the right side of video song in tiddler body (local video embedded using canonical uri field). The video and lyrics were at two different levels which I adjusted using margin-top CSS. Is there any way to align the video and lyrics at same level except by using margin-top CSS. All the relevant tiddlers are shown in the home page of the wiki.

You might look into absolute positioning. You’ll probably want to adjust to your own preferences, but this looked all right to me at most sizes (until I made my window narrow enough that the menubar started to wrap onto a second line):

.floatlyrics code  { 
position: absolute;
top: 11.9em;
right: 5em;
width: 42%;
max-height: calc(100% - 19.8em);
overflow-y: scroll; 
scrollbar-width: none;
}

For a slightly less hacky solution, you could make a new ViewTemplate that gets applied to all tiddlers with a title ending in .mp4, for instance, or perhaps a _canonical_uri field ending in .mp4 (or other video file formats of your choice). That would give you more fine-grained control over how the video and the lyrics template are displayed, and you could use the View Template Body cascade to apply it preferentially over the default template.

Also—just so you know—“mode” is not a CSS property. I imagine you were thinking of display: inline-block;.

Due to lack of time, I did a short testing only and the code you shared seem to work. Thank you @etardiff

Regarding using a seperate ViewTemplate for video tiddler with lyrics - that is a possibility using cascade mechanism. I have previously done something similar if I remember correctly. I will try that once I have more time to experiment.

I have one doubt though.How to use filter to target canonical uri field with filename ending with .mp4?

Regarding display: inline-block , I guess I got confused with a something smilar in wikitext.

Glad it worked for you!

Try this: [has[_canonical_uri]] :filter[get[_canonical_uri]suffix[.mp4]]

Oh, that makes sense! The transclude widget does use mode=block and mode=inline.

@etardiff For the time being I am using a modified version of the sidetabs I have been using in my wiki. But I have to press a button to activate it - See this example. Video won’t play since its a local file. I will try out the View Template Body cascade soon for this purpose.

Do you know of any way to make the reveal widget show the content by default instead of having to press the button to reveal the hidden content ?

I’m not very familiar with $reveal, to be honest: I use list widgets when I want to show or hide content. But I’d think you could switch all instances of “match” and “nomatch” in the reveal widgets if you want the sidebar to be open by default on all tiddlers.

If you don’t want to change the behavior for all tiddlers, it’s probably easier not to put the lyrics in the sidebar. I guess you could clone it, put the lyrics in the clone version and switch match/nomatch there, and then you’d have a button to hide the lyrics if you want to.

It’s probably simpler and neater to use the ViewTemplate cascade, though.

Its not sidebar, I use a custom viewtemplate called sidetabs which can be activated by pressing the floating info button on the right side of the tiddler or by Alt+A shortcut.

I will try it in a few days time.

Sorry, that’s what I was referring to.