Easy/simple CSS tiddler to adjust modal size/position

[Charlie Veniot]

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.

[Charlie Veniot]

Oops, width works A-1, but height adjustment doesn't.  So part-way to where I want to be.

[Charlie Veniot]

Yeah, CSS does not easy to me come together.

Now I have what I want.  Attached.

[Charlie Veniot]

I should not watch the news and post at the same time.

[arun babu]

Hi Charlie,

Is drag and resize possible for modals?

Arun

[Charlie Veniot]

drag I don't know how to do.

resize, yes:   ``` .tc-modal {width:94vw;left:3vw;height:94vh;top:3vh;resize:both;overflow:auto;} ```

[Charlie Veniot]

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

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.

[arun babu]

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

[arun babu]

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

[Charlie Veniot]

Yeah, that is for a sample that allows resizing a modal and also dragging a modal around to place it wherever one wants.  Easy to get confused.

No worries.

[Charlie Veniot]

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.

[arun babu]

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

[Charlie Veniot]

That is very good stuff !   (Good exploring/experimentation.)

Thanks for sharing !

[arun babu]

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

[Charlie Veniot]

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.

[arun babu]

https://demowiki.tiddlyhost.com/

Sorry. I forgot to link the demo wiki. If you find time, please look into this - if not now, at a later time. I am not in a hurry.

[TiddlyTweeter]

arunn...@gmail.com / @arunnbabu81

has a link to a demo of modal tweaks?? https://demowiki.tiddlyhost.com

I visited but can't see how to test your modal approach?

Best, TT

[arun babu]

Click on the alternative edit button on the view toolbar of the tiddler

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/LvOFqpe9H4Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5b5da51f-3f09-4fc8-931c-a2594d126ef5n%40googlegroups.com.

[TiddlyTweeter]

@arunnbabu81:  Click on the alternative edit button on the view toolbar of the tiddler

Thanks! I see it now! Neat.

How do I use it for Tiddlers that are not for editing?

TT

[arun babu]

TT

What do you mean by tiddlers not meant for editing ?

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/LvOFqpe9H4Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0bb4fa5d-6f5d-42ac-8d38-79334753cd2en%40googlegroups.com.

[TiddlyTweeter]

arunn...@gmail.com / @arunnbabu81 wrote: What do you mean by tiddlers not meant for editing ?

 I can't see how you'd display normal Tiddlers with it.

It seems to only work in edit mode?

I hope this is clearer!

TT 

[arun babu]

That would be easy to do I guess...just have to remove the edit text area from the table. I will try when I am back home....but what is the need of using modal to view the tiddler? 

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/LvOFqpe9H4Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/39356a84-d0e3-4d43-8da8-89dc50297de8n%40googlegroups.com.

[TiddlyTweeter]

arunn...@gmail.com / @arunnbabu81 wrote: That would be easy to do I guess...just have to remove the edit text area from the table. I will try when I am back home....but what is the need of using modal to view the tiddler? 

Very useful for, for instance, documentation. 

They are superior to popups in that you can house within one an entire eco-system of information.

TT

[arun babu]

```

TiddlyTweeter:

I can't see how you'd display normal Tiddlers with it.

It seems to only work in edit mode?

```

https://demowiki.tiddlyhost.com/

I have added another view toolbar button to open a modal which doesn't have an edit mode. Is this what you were telling about? Or may be I didnt understand what you were trying to explain.

[TiddlyTweeter]

arunn...@gmail.com wrote: ... https://demowiki.tiddlyhost.com/ I have added another view toolbar button to open a modal which doesn't have an edit mode. Is this what you were telling about? 

Exactly that! 

Thankyou very much for taking the time to do that on my request!

It is very useful to see practical tweaking of modals. 

The main thing for me is your approach uses the screen space well!

Best wishes

TT

[arun babu]

```

TiddlyTweeter:

The main thing for me is your approach uses the screen space well!

```

Actually it not my creation. Charlie Veniot is the original author of these modal related  experiments. I just tweaked them for my own uses.

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/LvOFqpe9H4Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b68948f1-e67a-4134-a288-0a4f9e039f6cn%40googlegroups.com.

[TiddlyTweeter]

arunn...@gmail.com wrote: "Actually it not my creation. Charlie Veniot is the original author of these modal related  experiments. I just tweaked them for my own uses." 

Thanks to Charlie too! I kinda knew that, but you did a lot of work extending it.

Anyway thanks to both of you!

TT

[Charlie Veniot]

Standing tall on the shoulders of others.

You have taken things to a new height.  Pat yerself on the back for job well done!