On Tuesday, July 27, 2021 at 8:00:40 AM UTC-7 Ste wrote:
> I like the ability to set the pop up direction.
>
The popup position is automatically calculated based on the $button that
invokes it, combined with the position="..." keywords.
However, there are MANY more possibilities by using a bit of CSS to adjust
the position, like this:
<$button popup=<<qualify "$:/state/popup/myPopup">>> CLICK ME! </$button>
<$reveal state=<<qualify "$:/state/popup/myPopup">> type="popup"
position="belowright">
<div class="tc-drop-down" style="transform:translate(0,calc(-50% -
1em));">
POPUP CONTENT HERE
<p/>
SOME MORE CONTENT
<p/>
ETC.
</div>
</$reveal>
Notes:
1) In the example above, we use "transform:translate(0,calc(-50% - 1em));"
to shift the popup y-offset up by half the height of the popup less 1em
extra to account for the height of the $button text
2) The result is that the popup appears directly to the right of the
$button, but is now vertically centered with the $button text
3) Of course, you can use X,Y values in the translate(...) to adjust the
position to put it exactly where you want, with much finer control than
just using the built-in position="..." param
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/188f9754-ed9e-432a-a0ea-fcd875d3fa80n%40googlegroups.com.
