Sticky editor with preview on?

Developers
#1

I was trying to see if I could make the editor tool bar ‘sticky’ so it wouldn’t scroll off the screen when writing long texts. Rather than ‘reinvent the wheel’ I did a search and found David Gifford’s old post over in the GG: https://groups.google.com/g/tiddlywiki/c/KVBFIqkYbBM/m/fevnI1WcAgAJ

Which lead me to create a CSS tiddler with:

.tc-editor-toolbar {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 10px;
	background: #f3f3f3;
	z-index: 500;
}

That seems to work ok in limited testing. But then ceases to work entirely when you switch on text preview mode.

Has anyone figured out the 'secret sauce to make this work with text preview turned on?

Thanks,
Scott

1 Like
How to make a sticky editor-toolbar how to add your css and js?
#2

When preview mode is engage the parent (.tc-tiddler-preview) of .tc-editor-toolbar has overflow set to auto which breaks sticky?

removing overflow: auto allows the toolbar to sticky in either mode, hwoever I don’t know what it might break.

.tc-tiddler-preview {
  overflow: unset;
}
.tc-editor-toolbar {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 40px;
	background: #f3f3f3;
	z-index: 500;
}
1 Like
Featureset (4) (Request) to Fix the Broken Editor Mode
#3

That is because the content of the body can be one of the two :

When the preview is open …

<div class="tc-tiddler-preview">

<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>

<div class="tc-tiddler-preview-preview">

<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">

<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>

</$transclude>

</div>

</div>

or when the preview is closed …

<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes">

<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>

</$reveal>

As described in the tiddler $:/core/ui/EditTemplate/body/default.

The position sticky doesnt work because when the preview is open, the nearest parent element of the editor bar becomes .tc-tiddler-preview, and the overflow of that class is set to auto. This prevent the stricky position from working :

Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. This effectively inhibits any “sticky” behavior (see the GitHub issue on W3C CSSWG).

source : position - CSS: Cascading Style Sheets | MDN

EDIT: Oops, I just repeated what john said, my bad !
You might want to use overflow:visible though, since this is the default value.

Another option is to add a fixed height : Dealing with overflow and position: sticky; | CSS-Tricks - CSS-Tricks

#4

Thanks, both of you. I learned a bit more about TW and CSS so that’s always a good thing.

Adding the following works as advertised

.tc-tiddler-preview {
  overflow: visible;
}