Hello, It sounds like you are making all kinds of progress.
I have not looked at any of this stuff since May, and I am much too busy with things that are way too interesting to put aside. I'd suggest you take TiddlyWiki's empty.html, add to it just the parts you are tying to get working the way you would like, and see if anybody over at Talk.TiddlyWiki can help out. The things you are wanting, I'm sure they can all be done with the right kind of CSS, HTML, and TiddlyWiki widgets. For example, editor and preview side-by-side panel's, each thing needs to be in a div, and those two div's set to be side-by-side. The preview's div will have a "display: hidden" style when a "show preview" check box widget is not checked. Something like that. Edit text widget with tag=textarea, it will automatically grow in height, I think, when needed. If it isn't doing that, just get rid of any related CSS that is impacting the height of it. On Tuesday, August 16, 2022 at 5:32:00 PM UTC-3 [email protected] wrote: > Hi Charlie, > > I have been using many of your solutions in my wiki - mostly the modals. I > modified your BASIC Dialect Form to create a modal with a table showing > edit text area on one side and preview mode on other side. And using a view > toolbar button, I use this modal to edit my tiddlers on the go (I have > named it as alternate editor in the demo wiki). The problem I encounter is > that the height of the edit text area and preview remain the same > irrespective of the amount of text in the tiddler. Even if the tiddler > contains only few sentences, the edit text area and preview extend beyond > the lower margin of the modal and I have to scroll to see the tiddler > fields which lies at the bottom of the modal. This is because i have set > the height of the table row to 90vH. Is there any way to modify the CSS > such that the height of edit text area and preview changes depending on the > amount of content in the tiddler. > > Also is there a way to show only the edit text area initially and when > needed use a radio button or select widget to show the edit text area and > preview side by side? > > Thank you > Arun > On Sunday, May 15, 2022 at 11:53:57 PM UTC+5:30 [email protected] wrote: > >> That is very good stuff ! (Good exploring/experimentation.) >> >> Thanks for sharing ! >> >> On Sunday, May 15, 2022 at 3:16:25 PM UTC-3 [email protected] wrote: >> >>> Hi Charlie, >>> >>> I removed *width:94vw;left:3vw;height:94vh;top:3vh * >>> >>> from the code given below >>> >>> *.tc-modal >>> {width:94vw;left:3vw;height:94vh;top:3vh;resize:both;overflow:auto;}* >>> >>> >>> Now the modal is centered and resizable. >>> >>> Arun >>> On Sunday, May 15, 2022 at 2:17:08 AM UTC+5:30 [email protected] wrote: >>> >>>> Oh boy, that I don't know how to do. I suggest you do the tiddler in >>>> an open window thing instead of modal. That's really easy. >>>> >>>> On Saturday, May 14, 2022 at 5:22:12 PM UTC-3 [email protected] wrote: >>>> >>>>> Hi Charlie, >>>>> >>>>> I tried to resize the modal by dragging the margin. >>>>> I also tried to reduce the 94vh to a lesser value for the width and >>>>> height. >>>>> On both occasions, the modal was aligned to the left of the screen. >>>>> Is there any way to make the modal align to the the center on resizing >>>>> by both methods. >>>>> I tried adding *margin:auto; align-content:center; *to the code >>>>> But it was not working. >>>>> >>>>> >>>>> Also is there a way to close the modal by clicking anywhere outside >>>>> the modal window (instead of reaching for and clicking the close button >>>>> within the modal) >>>>> >>>>> Arun >>>>> >>>>> On Sunday, May 15, 2022 at 1:33:54 AM UTC+5:30 arun babu wrote: >>>>> >>>>>> Hi Charlie, >>>>>> >>>>>> I meant resizing only (resizing by dragging at the margins of the >>>>>> modal). Sorry for creating the confusion. >>>>>> Your above solution works for me. Thank you. >>>>>> The word *drag and resize* I took from the link I shared above. >>>>>> >>>>>> Arun >>>>>> >>>>>> On Sunday, May 15, 2022 at 1:22:09 AM UTC+5:30 [email protected] >>>>>> wrote: >>>>>> >>>>>>> I think drag requires javascript: >>>>>>> https://www.w3schools.com/howto/howto_js_draggable.asp >>>>>>> >>>>>>> Yuck. I don't do TiddlyWiki things with javascript. >>>>>>> >>>>>>> To do that kind of stuff, I would switch from using a modal to using >>>>>>> WidgetMessage: >>>>>>> tm-open-window >>>>>>> <https://tiddlywiki.com/#WidgetMessage:%20tm-open-window> >>>>>>> >>>>>>> A modal is meant to do something there and only there until done. >>>>>>> Opening up tiddlers in their own windows, that allows for >>>>>>> multi-tasking/viewing. >>>>>>> >>>>>>> >>>>>>> On Saturday, May 14, 2022 at 4:46:58 PM UTC-3 Charlie Veniot wrote: >>>>>>> >>>>>>>> drag I don't know how to do. >>>>>>>> >>>>>>>> resize, yes: ``` .tc-modal >>>>>>>> {width:94vw;left:3vw;height:94vh;top:3vh; >>>>>>>> *resize:both;overflow:auto;*} ``` >>>>>>>> >>>>>>>> On Saturday, May 14, 2022 at 4:30:03 PM UTC-3 [email protected] >>>>>>>> wrote: >>>>>>>> >>>>>>>>> Hi Charlie, >>>>>>>>> >>>>>>>>> Is drag and resize <https://embed.plnkr.co/plunk/C240xY> possible >>>>>>>>> for modals? >>>>>>>>> >>>>>>>>> Arun >>>>>>>>> On Saturday, May 14, 2022 at 10:11:10 AM UTC+5:30 >>>>>>>>> [email protected] wrote: >>>>>>>>> >>>>>>>>>> I should not watch the news and post at the same time. >>>>>>>>>> >>>>>>>>>> On Saturday, May 14, 2022 at 1:40:18 AM UTC-3 Charlie Veniot >>>>>>>>>> wrote: >>>>>>>>>> >>>>>>>>>>> Yeah, CSS does not easy to me come together. >>>>>>>>>>> >>>>>>>>>>> Now I have what I want. Attached. >>>>>>>>>>> >>>>>>>>>>> On Friday, May 13, 2022 at 11:06:06 PM UTC-3 Charlie Veniot >>>>>>>>>>> wrote: >>>>>>>>>>> >>>>>>>>>>>> Oops, width works A-1, but height adjustment doesn't. So >>>>>>>>>>>> part-way to where I want to be. >>>>>>>>>>>> >>>>>>>>>>>> On Friday, May 13, 2022 at 10:45:49 PM UTC-3 Charlie Veniot >>>>>>>>>>>> wrote: >>>>>>>>>>>> >>>>>>>>>>>>> I'm pretty sure I'm going to be adding the attached tiddler to >>>>>>>>>>>>> all my TiddlyWiki instances. >>>>>>>>>>>>> >>>>>>>>>>>>> I make heavy use of modals, and I want them all to be >>>>>>>>>>>>> width:80% and max-height:80%. >>>>>>>>>>>>> >>>>>>>>>>>>> Well, unless/until I find a reason not to. >>>>>>>>>>>>> >>>>>>>>>>>>> Download the attached JSON file and drag into any TiddlyWiki >>>>>>>>>>>>> (TiddlyWiki.com !) to see and adjust. >>>>>>>>>>>>> >>>>>>>>>>>>> >>>>>>>>>>>>> -- 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/b30bf55c-78dd-4d7c-8916-213d8f9f999an%40googlegroups.com.
