Need a little assistance with adjusting how tiddlers are laid out

[Justin H.]

I'm currently using the very basic version of JD's Mobile plugin, as I aim to use my TW from my phone, but I'm not sure what I need to do in order to achieve what I've mocked up below.

I'd like to just figure out  a way to make a separate stylesheet to apply these changes without having to make any changes to JD's plugin if possible.

any help with this would be greatly appreciated!

[Télumire]

You can use this style :

.tc-tiddler-preview{
display:flex;
flex-direction:column-reverse;
}

.tc-tiddler-preview>*
{
margin:0!important;
width:100%!important;
}

In a tiddler with the tag $:/tags/Stylesheet.
Enjoy ! :)

[Justin H.]

perfect! thank you :D

[Télumire]

I noticed that when the preview is closed, the toolbar come back to the top. This is because Tiddlywiki use two containers, one for the editor without the preview, and the second to display the editor with the preview.

If you want the layout to stay the same with and without preview, use this :

.tc-dropzone-editor>.tc-reveal,.tc-tiddler-preview{

display:flex;
flex-direction:column-reverse;
}

.tc-tiddler-preview>*
{
margin:0!important;

width:auto!important;
}

/*optional : prevent scroll bar in the text editor*/
.tc-edit-texteditor {
object-fit: contain;
overflow-y:hidden;
}


And if you want to support the code mirror addon too, use this :

.tc-dropzone-editor>.tc-reveal,.tc-tiddler-preview, .tc-edit-tags~.tc-reveal{
display:flex;
flex-direction:column-reverse;
}

.tc-tiddler-preview>p {
display:contents;
}

.tc-tiddler-preview>*,.tc-tiddler-preview>p>*{
margin:0!important;
width:100%!important;
}

/*optional : prevent scroll bar in the text editor*/
.tc-edit-texteditor {
object-fit: contain;
overflow-y:hidden;
}

[Justin H.]

Thank you for this! I was actually playing around with it to figure out how to do just this

[Justin H.]

is there a method of applying css to the .tc-edit-texteditor? I've tried a few different ways to do that, but I can't seem to get anything to work, only with the other scrollbars.

having the scrollbars hidden does look nice, but doesn't allow me to scroll with the mousewheel unfortunately.

[Télumire]

Try this :

/* Hide scrollbar for Chrome, Safari and Opera */

.tc-edit-texteditor::-webkit-scrollbar {

    display: none;

}

/* Hide scrollbar for IE, Edge and Firefox */

.tc-edit-texteditor {

    max-height: 200px; /* if not set there is no overflow */

    -ms-overflow-style: none; /* IE and Edge */

    scrollbar-width: none; /* Firefox */

}

Demo : https://telumire.be/demo/TW/hide_scroll.html

[Justin H.]

Testing it currently, and it seems to give two uneven length columns, both with scrollbars.

I'm currently using chrome browser as well, no other tw open currently to interfere with it (hopefully.)

[Justin H.]

Just as a sidenote, I use the choose height of texteditor option, but even without that chosen it still adds the scrollbar to the texteditor, I'm not entirely sure why to be honest.

[Télumire]

Mh sorry, I only tested in firefox, looks like firefox allows to style iframe content while chrome doesnt .. you use chrome right ?
I think (based on this thread) you will need to either modify the core or use a plugin like CodeMirror, which doesnt use iframe :
https://telumire.be/demo/TW/hide_scroll_codemirror.html

You can set the preview to be the same size than the editor, the height I use in my example is simply to force an overflow.

[Justin H.]

Ah, I see. Alright then, I'll go ahead and add that to my TW.

Thank you for the help with both of these!