On Friday, July 3, 2020 at 5:10:37 PM UTC-7, Mark S. wrote:
>
> I've been wrestling with the reveal popup widget.
>
> No matter what I do with the widgets' "style" setting, or the widget's
> "position" setting, it always generates an internal style attribute with
> "left: 15px" (the amount does vary). Apparently in CSS, left trumps right,
> so even if I specify a right, it gets ignored. I really want to create my
> own style attribute or, better yet, specify the settings through a class.
> If I specify my own left value, it ignores it.
>
> Is there something I'm missing? Is there a way to turn off the internal
> style generation?
>
The $reveal position="..." param is a keyword value that is only used when
type="popup",
and calculates the placement of the $reveal popup, based on the $button
that triggers it.
If you want to override the popup $reveal positioning, then in the $reveal,
don't use
<$reveal state="..." type="popup" position="...">
Instead use
<$reveal state="..." type="nomatch" text="" style="position:relative">
(note this "position" is CSS syntax, not a widget keyword!)
Then, in the *content* of the reveal you specify a class or style, where
you use position:absolute
and any offsets you want, like this:
<$button popup=<<qualify "$:/state/popup/foo">> actions=<<someactions>>
class="tc-button">
click me!
</$button>
<$reveal state=<<qualify "$:/state/popup/foo">> type="nomatch" text=""
style="position:relative">
<div class="tc-drop-down" style="position:absolute;left:5em;top:5em">
popup content here
</div>
</$reveal>
The position of the "pseudo-popup" is relative to the normal default
placement of the $reveal content. Thus,
in the above example, the $reveal content appears shifted 5em to the right
and 5em down relative to the bottom-left
corner of the $button that triggers it.
enjoy,
-e
--
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/f0c91aad-c032-4c70-bffc-a1e04c2a6c98o%40googlegroups.com.
