Sticky editortoolbar?

[David Gifford]

Okay I know I had this set up once., but I can't find it.

Can anyone explain how I could have a sticky editortoolbar? So that when I am editing a tiddler and scroll down, the editing buttons stay at the top of the screen?

[Odin]

The CSS position attribute has a 'sticky' value. See: https://www.w3schools.com/cssref/pr_class_position.asp

Adding this to a stylesheet tiddler would produce the effect:

.tc-editor-toolbar { position: sticky; top: 0; }

To prevent the look of 'floating' buttons you can also add a 'background-color: white;'.

Op dinsdag 27 april 2021 om 16:48:39 UTC+2 schreef David Gifford:

[David Gifford]

Thanks a bunch Odin!

(I feel like a pagan idolater for writing that sentence!) :-)

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/KVBFIqkYbBM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f079ded7-2ab7-4352-9641-1ed276c8ca58n%40googlegroups.com.

[History Buff]

I haven't been able to get the CSS to work yet. For now, I've been using the fixed height setting ($:/core/ui/EditorToolbar/editor-height-dropdown) which fixes the editor window and makes the toolbar visible at all times.

[David Gifford]

@History Buff

CSS worked great for me.

Create a tiddler with the following:

Title: $:/HistoryBuff/StickyEditorButtons

tag: $:/tags/Stylesheet

text: .tc-editor-toolbar { position: sticky; top: 0; background-color: white;}

type: text/css

[Brian Radspinner]

History Buff may be in the same "position" as I am: I think I have some other CSS styles that as messing with the ability to use what you posted. When I use position:sticky on the toolbar, it does nothing, still scrolls with the tiddler frame.

[maki aea]

try modifying dave's example with top:0

to top:40px (or 20px etc depending on your wiki)

for single line toolbars top:0 is getting hidden behind other elements

[maki aea]

for mobile safari at least tapping just outside the editor area brings the toolbar back onscreen (once you have it stickied in css and then after editing it seems to scroll offscreen)

hth

i found my old notes about this at http://makiaea.org/00045/20210120makiaea.html#changelog

see the entry 20210206