move preview panel to bottom for tagged tiddler

[Alexander Kogan]

Hello,

I'm trying to change the edit preview of a tiddler, so that the preview panel is shown under the edit textbox instead on the right side.

This should also only be the case, if the tiddler is tagged with "preview-down".

I'm unsing tiddlydrive v0.1.3 to display a wiki in a Google Drive and my theme is the Vanilla basic theme.

So far I created a tiddler named "show preview under editor" with the tag "$:/tags/Stylesheet" and the content:

[data-tags*="preview-down"] .tc-tiddler-preview-preview { float: unset; width: 99%; }
[data-tags*="preview-down"] .tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor { width: 99%; }
[data-tags*="preview-down"] .tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor { max-width: 99%; }

It works except for one thing. The edit textbox is not stretched to 99%.
If I inspect the CSS, it still shows, that it's using the old definition with 49%.

If I overwrite it in the inspector manually, it also works, but it doesn't seem to pick up the definition from the custom stylesheet.

How can I show the editor with full width?

[Brian Radspinner]

Try working these values into your stylesheet and see how it goes, it works for me...

/* ----- edit text field ----- */

.tc-tiddler-edit-frame .tc-tiddler-preview iframe.tc-edit-texteditor {

   float: none;
   width: 100%;
}

/* ----- content preview area ----- */

.tc-tiddler-preview-preview {
   float: none;
   width: 100%;

[TW Tones]

Brian,

Thanks for that, something I have wanted for some time.

I note, setting the width as follows; stopped the slider appearing.

.tc-tiddler-preview-preview {
   float: none;
   width: 99.5%;

Personally I plan to place the preview above the text.

Regards

Tones