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 */
}
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/15be1784-58c2-46fd-a9cf-0ce1cac446d3n%40googlegroups.com.
