Style attribute in Popup ignores user's style and position settings (bug?)

[Mark S.]

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?

I would tend to view this as a bug, since the code overrides whatever the user sets.

Thoughts?

Thanks!

[Eric Shulman]

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

[Mark S.]

Thanks for that, Eric! It is definitely non-intuitive. I guess the upshot is that if you want a custom popup you have to essentially roll your own. It seems like the "position" attribute doesn't allow anything other than left positions. I hope tc-popup-keep works with this approach as well.

Thank you!

[Eric Shulman]

On Friday, July 3, 2020 at 8:45:32 PM UTC-7, Mark S. wrote:

Thanks for that, Eric! It is definitely non-intuitive. I guess the upshot is that if you want a custom popup you have to essentially roll your own. It seems like the "position" attribute doesn't allow anything other than left positions. I hope tc-popup-keep works with this approach as well.

It does.  Just use

<div class="tc-drop-down tc-popup-keep" ...

-e