After upgrade my fixed position edit toolbar dissappears when scrolling through tiddlers only appearing in the gaps between tiddlers

[Sapphireslinger]

I use TiddlyWiki (basic Vanilla theme) with Qinoid on my smartphone all day long.

Quite some time ago I made my edit toolbar stay at the top of my screen by putting this in a tiddler (tagged with $:/tags/Stylesheet)

.tc-tiddler-edit-title { position:fixed; top:0px; left:0; right:0; padding:3px; background-color: pink; }

It wasn't as pretty as the j.d.mono.tiddlyspot.com edit toolbar (which I would love to copy but I gave up after a few hours trying to get hints from his code) but at least my edit toolbar stuck to the top of the screen, permenently on top of everything.

The problem is that after finally upgrading to 5.1.22 (from 5.1.19) about a week ago, my fixed position edit toolbar dissappears when I scroll away from the tiddler I'm working on, and only reappears every time the gap between tiddlers passes over it. It's like it's on a layer beneath the tiddlers and you can only catch glimpses through the gaps.

Any hints on how to keep it on top?

Then this morning (inspired by jd mono) I decided to try and stick my page controls toolbar to the top of my screen as well (because I write enough to force me to scroll for miles just to get back to the controls, all that scrolling is what I am trying to cut out) by adding...

.tc-page-controls { position:fixed; top:0px; left:0; right:0; padding:1px; background-color: white; }

... to the same stylesheet.

Now the page toolbar and the edit toolbar sort of overlap each other up at the top of the screen and both of them dissappear under tiddlers that are scrolled over them.

I figured out that I could add top:60(or so)px to the edit toolbar to push it down below the page toolbar.

However, the page toolbar seems to maintain a permanent 10px? gap between itself and the top of the screen, when I would like it to be flush with the top of the screen.

And they both still dissappear under scrolling tiddlers.

Help?

[Sapphireslinger]

This worked! (for part of the problem)

.tc-page-controls { position:fixed; top: -15px; left:0; right:0; padding-left: 3px; background-color: white; }

.tc-tiddler-edit-title { position:fixed; top:20px; left:0; right:0; padding-left: 3px; background-color: pink; }

BUT Page Toolbar still disappears under tiddlers being scrolled over it.

Strangely the Edit Toolbar seems to have been cured of it.

[TonyM]

Perhaps you need to set the z-index on the toolbar so it uses the correct hight. Sometime ago someone shared the z-index this for multiple elements in tiddlywiki. My guess is 500 or 1000

Regards
Tony

[Birthe C]

Ton Gerner has a nice table with the Z-indexes in use in Tiddlywiki. Z-index

Birthe

[Sapphireslinger]

Tony M and Birthe C, thank you! The z-index 500 worked perfectly for the Page toolbar!

But none of the z-index numbers works for the Edit Toolbar. (I even took z-index off of the Page Toolbar and tried using it for the Edit Toolbar alone, but it didn't do anything.

So at present my code reads

.tc-page-controls {position: fixed; top: -15px; left:0; right:0; padding-left: 3px; z-index:500; background-color: white; }

.tc-tiddler-edit-title {position: fixed; top:18px; left:0; right:0; padding-left: 3px; background-color: pink; }

Could it have something with ...

$:/core/ui/EditTemplate/controls

... showing ...

<$view field="title"/>

Does that mean the controls only show up when they are passing through a title field?