Idea: Resizable ratio edit/preview areas

#1

Observations:

When editing a tiddler, the preview output is often different in size and width to the edit area for example a large list widget in the editor results in a simple list in the preview.

The bottom right of the edit box, including with preview, displays a draggable anchor, but this effectively does nothing;
Snag_1ecabd81

Idea

If we allowed this to work, ie: resize edit area on drag, even if the position is not saved, we could use this to reduce or widen the text area and have the preview panel narrow or widen to accomodate the available space.

  • Adding the ability to increase the size vertical (editor and preview) would be helpful but not as useful as horizontal resizing.
  • There would be a relationship to the auto/fixed editor height editor toolbar button.

Any CSS wizzes that can help here?

#2

Try this:

<style>
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview{
container-type: inline-size;
grid-template-columns:max-content 1fr;
}
.tc-tiddler-editor .tc-edit-texteditor{
width: 50cqw;
min-width: 10cqw ;
max-width: 90cqw ;
resize: horizontal!important;
}
</style>
#3

Thanks for the quick reply

I was not sure how to use your styles so I simply put it in a tiddler that is visible.

It has changed the width in edit mode to less than 100%, but is otherwise not working. Other than the drag shows its only horizontal.

In preview mode, Somehow we need the preview window to resize to fill the remaining space.