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 <https://groups.google.com/g/tiddlywiki/c/7kn96o8seZY/m/7YfIS_-fBwAJ?pli=1>) 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. On Friday, 7 January 2022 at 13:31:49 UTC+1 [email protected] wrote: > 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. > > On Friday, January 7, 2022 at 7:30:41 AM UTC-5 Justin H. wrote: > >> Testing it currently, and it seems to give two uneven length columns, >> both with scrollbars. >> >> [image: Scrollbar testing.PNG] >> >> I'm currently using chrome browser as well, no other tw open currently to >> interfere with it (hopefully.) >> >> >> >> On Friday, January 7, 2022 at 7:00:06 AM UTC-5 Télumire wrote: >> >>> 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 >>> >>> >>> On Friday, 7 January 2022 at 10:53:23 UTC+1 [email protected] >>> wrote: >>> >>>> 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. >>>> >>>> On Friday, January 7, 2022 at 4:20:16 AM UTC-5 Justin H. wrote: >>>> >>>>> Thank you for this! I was actually playing around with it to figure >>>>> out how to do just this >>>>> >>>>> On Wednesday, December 15, 2021 at 12:25:11 PM UTC-5 Télumire wrote: >>>>> >>>>>> 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; >>>>>> } >>>>>> >>>>>> Le mardi 14 décembre 2021 à 14:36:32 UTC+1, [email protected] a >>>>>> écrit : >>>>>> >>>>>>> perfect! thank you :D >>>>>>> >>>>>>> On Sunday, December 12, 2021 at 4:48:23 PM UTC-5 Télumire wrote: >>>>>>> >>>>>>>> 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 ! :) >>>>>>>> Le samedi 11 décembre 2021 à 11:31:04 UTC+1, [email protected] >>>>>>>> a écrit : >>>>>>>> >>>>>>>>> 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! >>>>>>>>> >>>>>>>>> [image: Before.PNG][image: After.PNG] >>>>>>>>> >>>>>>>> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4b955bdd-4de6-450d-9849-30e2aaae826fn%40googlegroups.com.
