Ah, I see. Alright then, I'll go ahead and add that to my TW. Thank you for the help with both of these!
On Friday, January 7, 2022 at 8:51:58 AM UTC-5 Télumire wrote: > 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/14fe33bd-c238-4f51-a99e-bcf690ffae48n%40googlegroups.com.
