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/05771cef-0d90-42e3-9f4a-7cf0a74c94fen%40googlegroups.com.
