In the late 1990s web productivity was at an all time. The 'irrational
exuberance' that resulted lead to the dot-com bubble and collapse. To
prevent this from happening again, the W3C and other committees got
together and spec'd out a system guaranteed to virtually eradicate
productivity. Now a developer might spend an entire afternoon trying to
move some element 2 em from the almost perfect place, or perhaps an entire
week trying to find out why code that works on virtually every browser
won't work in the leading market browser. Boom & bust averted -- mission
accomplished!
That said, the following changes *might* do what you want. If it appears to
break something else, then the CSS will have to be tweaked to match your
particular situation. Basically it turns off the current positioning
mechanism and treats the image like text. Be sure to make a back-up before
trying.
Good luck!
Mark
.tc-modal-wrapper {
text-align: center;
padding-top: 2em;
}
.tc-modal {
top: unset;
left: unset;
width: unset;
display: inline-block;
position: unset;
}
On Wednesday, July 19, 2017 at 2:03:15 PM UTC-7, Vayu Asura wrote:
>
> I'm using tm-modal to create a full-res image display. So I call tm-modal
> to display the image tiddler.
> Extracted all the css rules I found regarding the modal:
>
> .tc-modal-wrapper { position: fixed; overflow: auto; overflow-y: scroll;
> top: 0; right: 0; bottom: 0; left: 0; z-index: 900; }
> .tc-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0
> ; z-index: 1000; background-color: #333333; }
> .tc-modal { z-index: 1100; background-color: #ffffff; border: 1px solid
> #999999; }
> @media (max-width: 55em) { .tc-modal { position: fixed; top: 1em; left:
> 1em; right: 1em; }
> .tc-modal-body { overflow-y: auto; max-height: 400px; max-height: 60vh; }
> }
> @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;} }
> .tc-modal-header { padding: 9px 15px; border-bottom: 1px solid #eeeeee; }
> .tc-modal-header h3 { margin: 0; line-height: 30px; }
> .tc-modal-header img, .tc-modal-header svg { width: 1em; height: 1em; }
> .tc-modal-body { padding: 15px; }
> .tc-modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align:
> right; background-color: #f5f5f5; border-top: 1px solid #dddddd; }
>
>
> The thing is I can't center smaller images within the modal body, it is
> always alingned left. Not sure which rule to edit and what to add for the
> center alignment.
> Not sure if wrapping image into another tiddler would work correctly and
> it is very undesireable as I want to process img tiddlers directly with a
> modal-generating macro and thus creating intermediate tiddlers will get
> clunky.
>
--
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 post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/817fe9be-f191-4a37-a2c0-e95000ef36af%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
