[tw5] Easy/simple CSS tiddler to adjust modal size/position

Google Group (Read Only)
#1

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.

Modal CSS.json (187 Bytes)

#2

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

#3

Yeah, CSS does not easy to me come together.

Now I have what I want. Attached.

#4

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

Modal CSS.json (434 Bytes)

#5

Hi Charlie,

Is drag and resize possible for modals?

Arun

#6

drag I don’t know how to do.

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

#7

I think drag requires javascript: How To Create a Draggable HTML Element

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.

#8

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

#9

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

#10

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.

#11

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.

#12

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

#13

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

Thanks for sharing !

#14

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

#15

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.

#16

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.

#17

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

#18

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

#19

@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

#20

TT

What do you mean by tiddlers not meant for editing ?