Can I manipulate modal window size using parameters?

[Vayu Asura]

I'm trying this:

<$button>
<$action-sendmessage $message="tm-modal" $param="Picture 1.2" />
Click me!
</$button>

The "Picture 1.2" is an image tiddler. It is a full screenshot so it's big. When I click the button (formatted as an image thumbnail) I want to get a closer look at the picture at full size.

The problem is that modal window is pretty small and seems fixed width. The tm-modal message has no explicit parameters to adjust it. Is there any way to manipulate default modal size?

[Mark S.]

On mine, an oversized picture results in a scroll bar along the bottom. Do you see a scroll bar?

The size settings appear to be established by class .tc-modal with attributes:

position: fixed;
top: 2em;
left: 25%;
width: 50%;

So the image should be given half of your screen space. After that another attribute overflow-y: auto creates a scrollbar (at least on my desktop).

You could create a tiddler tagged $:/tags/Stylesheet with :

.tc-modal {
position: fixed;
top: 2em;
left: 0%;
width: 100%;
}

to give the image the full screen real-estate.

Good luck,
Mark

[Vayu Asura]

Doesn't work when I try. 

So I made a tiddler, called it modal-css, tagged it with $:/tags/Stylesheet, copied your class description, set content type to TW5 or Static Stylesheet (tried both) and save it. Call a modal and it doesn't change, still 50% of screen, with scrolls, yes, just as before. 

There's something I really don't get about it: tried the example from "Using Stylesheets" article on tiddlywiki.com :

In addition, custom CSS stylesheets can be defined by tagging a tiddler $:/tags/Stylesheet. Try creating a custom stylesheet now with the following content in order to change the page background colour to red:

html body.tc-body {
 background: red;
}

And that didn't work for me either

[Mark S.]

Could you post your play TW where the styles aren't working? Especially the simple background example should work pretty much flawlessly ... hmm ... what browser are you using?

Good luck,
Mark

[Vayu Asura]

I seem to have messed up the tag - when I tried to recreate the behavior in an empty wiki - the red color worked and when I copied the tag I had 2 visually identical tags in the prompt. Probably got a trailing whitespace or something. After fixing that I messed around with PageStylesheet and vanilla theme css a bit. The best I could do is something like that:

@media (min-width: 55em) { .tc-modal { position: fixed; top: 2em; left: 5%; width: 90%; }

.tc-modal-body { overflow-y: auto; scroll; max-height: 700px; max-height: 80vh;} }

That still has some issues with not being able to center-align image within the modal and being unable to set relative vertical size while retaining the scrolling ability, but for this question that's pretty much it. Thanks!