CSS query: drag handle to resize tiddler? and preview panel?

#1

Is anyone aware of a way of making a tiddler vertically resizable by dragging on its lower border? I quite like starting with fixed height tiddlers but would like to adjust.

image
image982×204 4.11 KB

Also, is there a way of adding a splitter handle to allow resizing of the preview panel?

image|369x500 5%
image|369x500 5%400×542 20.1 KB

Thanks

Nick

#2

For resizing tiddlers height:

.tc-tiddler-frame {
resize: vertical;
overflow: auto;
}

And for resizing the editor preview:

.tc-tiddler-preview{
display:flex;
flex-wrap:wrap;
}

.tc-tiddler-preview .tc-editor-toolbar{
width:100%;
}

.tc-tiddler-preview-preview{
resize: horizontal;
overflow: auto;
}

.tc-edit-texteditor.tc-edit-texteditor-body{
flex-grow:1;
}

It’s janky but it works ! Note that since this is only CSS, the size will reset when you close / reopen a tiddler, the new size is not stored anywhere.

3 Likes
#3

TiddlySeq/plugins/Gk0Wk/sidebar-resizer at master · Gk0Wk/TiddlySeq · GitHub may give you some idea, but it seems using JS.

2 Likes
#4

Thanks, yes it is very janky! Useful CSS tips there but I have cut my losses and now using GhostText (which I think you recommended in another post @telumire)