How to get tc-popup-keep to "stick" ?

[Mark S.]

Maybe this isn't possible. I would like to make a popup box that has an input field that users can enter information into. I want the popup to "stick" until someone clicks outside the box. Unfortunately, currently the box closes as soon as a field is entered.

Thanks!

[Saq Imtiaz]

Class "tc-popup-keep" on the reveal widget should do the trick. 

If on the pre-release also make sure that any edit/edit-text widget you use has cancelPopups set to "no".

https://tiddlywiki.com/prerelease/#EditTextWidget

[Eric Shulman]

On Wednesday, July 22, 2020 at 6:40:28 AM UTC-7, Mark S. wrote:

Maybe this isn't possible. I would like to make a popup box that has an input field that users can enter information into. I want the popup to "stick" until someone clicks outside the box. Unfortunately, currently the box closes as soon as a field is entered.

Use "tc-popup-keep" on the tc-drop-down element:

<$button popup=<<qualify "$:/state/popup/something">>> button label </$button>

<$reveal state=<<qualify "$:/state/popup/something">> type="popup">

   <div class="tc-drop-down tc-popup-keep" style="min-width:fit-content;padding:1em;">

         enter whatever here:

         <$edit-text tiddler="whatever" tag="input" placeholder="" default="" focus="true"/>

   </div>

</$reveal>

enjoy,

-e

[Mark S.]

Hi Eric,

This is the basic structure (below) that I'm using, which I got from you. It solves the problem that when you use type="popup" in the reveal widget, the reveal widget won't let you use your own positioning. The default behavior puts the popup box off to the left, and in my case, off screen, whereas I want to put it to the right of the current tiddler.

The problem now is that tc-popup-keep doesn't seem to be working. As soon as you type in an edit box inside the div, it immediately closes the entire popup.

This is 5.1.23 prerelease, so per Saq's suggestion I tried adding cancelPopups="no" to the edit box, but that didn't seem to change the behaviour.

 

Thanks!

Code and CSS below.

<$button class="tc-btn-invisible" popup=<<state-editor-settings>> >{{$:/core/images/options-button}}</$button></span>
...
<$reveal type="nomatch" state=<<state-editor-settings>> text="" >
<div comment="THIS IS PSEUDO POPUP" class="nw-edit-settings tc-popup-keep tc-drop-down" >  
... edit boxes here ...
</div>
</$reveal>

This is the positioning that I'm applying via the CSS, in case that matters:

.nw-edit-settings {
    right: -0.5em !important;
    position: absolute;
    z-index: 2;
    top: 0.9em;
    opacity: 1;
    background-color: antiquewhite;
    padding: 0.9em;
    border: solid lightblue;
    width: min-content;
    border-radius: 1em;
}

[Saq Imtiaz]

@Mark try this:

<$reveal type="popup" state=<<state-editor-settings>> text=""  class="tc-popup-keep" position="belowleft">

Make sure the popup handle or its parent div, meaning button in this, is not using position:absolute.

You can probably use float:right instead.

[Saq Imtiaz]

Edited to highlight that you need to use type="popup"

<$reveal type="popup" state=<<state-editor-settings>> text=""  class="tc-popup-keep" position="belowleft">

[Mark S.]

Hi Saq,

The problem with type="popup" is that it puts the box offscreen and to the right. I needed to control where the box goes. Attempting to use "aboveright" didn't do anything -- it still put the box "belowleft".  The problem is that the reveal widget with type="popup" hardcodes the position in the style attribute. The technique Eric suggested fixed the problem of positioning by not using type="popup"

I'm not sure what you mean by "popup handle", but the launch button is in a div that uses absolute positioning, and the "popup" box uses absolute positioning.  Are you saying that the absolute positioning interferes with "tc-popup-keep" ?

I want my popup icon to float in the margin between the tiddler content and the edge of the tiddler river. Absolute positioning seemed to be the only way I could achieve this. The popup then floats just to the left of that. Everything looks nice (well, I'm not very fussy re UI), but now the popup wants to close as soon as I enter an edit field inside it.

Thanks!

[Saq Imtiaz]

Hi Mark,

OK I just tested those modifications I mentioned above on Noto and I believe they accomplish what you need, unless I have misunderstood the visual design you want.

Have a look:

https://saqimtiaz.github.io/sq-tw/notowritey.html

To move the gear icon etc more to the right use 

margin-right: -1em;

on the parent.

I'm not sure what you mean by "popup handle", but the launch button is in a div that uses absolute positioning, and the "popup" box uses absolute positioning.  Are you saying that the absolute positioning interferes with "tc-popup-keep" ?

Yes, use float:right instead of position:absolute on the div containing the button that triggers the popup. Then type=popup will position the popup correctly.

If you then use the reveal widget with the attributes I posted, the popup should appear just underneath the button, and to the left. It also will not close when clicked upon.

Saq

On Wednesday, July 22, 2020 at 7:55:57 PM UTC+2, Mark S. wrote:

Hi Saq,

The problem with type="popup" is that it puts the box offscreen and to the right. I needed to control where the box goes. Attempting to use "aboveright" didn't do anything -- it still put the box "belowleft".  The problem is that the reveal widget with type="popup" hardcodes the position in the style attribute. The technique Eric suggested fixed the problem of positioning by not using type="popup"

 

I want my popup icon to float in the margin between the tiddler content and the edge of the tiddler river. Absolute positioning seemed to be the only way I could achieve this. The popup then floats just to the left of that. Everything looks nice (well, I'm not very fussy re UI), but now the popup wants to close as soon as I enter an edit field inside it.

[Mark S.]

Hi Saq,

That's pretty amazing -- only two little changes and it basically works.

The main difference is the positioning. The original position for the controls would have been over in the margin and would not have affected the wrapping of the items on the toolbar.  But the real problem is that the "float right" isn't honoured if the toolbar is suppressed (which you can do down in the settings)

So then it ends up looking like (there should be two screenshots here) :

Even though the toolbar has been set to "display: none", the cog controls are acting like they're still there.

Thanks!

[Saq Imtiaz]

@Mark did you try setting a negative margin as I suggested?

.nw-edit-control {

1. float: right;
2. margin-right: -2em;
3. xborder: solid 2px;
4. top: 0.1em;
5. z-index: 1;

}

Updated: https://saqimtiaz.github.io/sq-tw/notowritey.html

[Mark S.]

I apologize  -- somehow I missed that. That seems to do the trick. I worked out that the text editor wanted 100% of the space, but giving the control elements -2em right-margin seems to allow the float to work as expected. It's not something I can quite make sense of. CSS! Arrgh!

Many thanks!

[Saq Imtiaz]

No worries. CSS has its own convoluted logic :)

A negative margin in practice does for floats what a negative right value was doing for position absolute, moving outside of the bounding box of the parent.

[Eric Shulman]

Here's another version that allows you to completely bypass the type="popup" positioning and "cook your own"

<div style="position:absolute;right:0;z-index:2;">
<$button popup=<<qualify "$:/state/popup/something">>>{{$:/core/images/options-button}}</$button>
<$reveal state=<<qualify "$:/state/popup/something">> type="nomatch" text="" class="tc-popup-handle" style="position:relative;">
   <div class="tc-drop-down" style="position:absolute;right:0;min-width:fit-content;padding:0.5em;" >
      enter stuff here: <$edit-text tiddler="whatever" tag="input" default="" placeholder="" />
   </div>
</$reveal>
</div>

1) The outermost div controls the position of the $button/$reveal combination so it will appear in the margin and won't affect any other content

2) The $button uses popup="..." to toggle the popup state between blank/non-blank.

3) The $reveal uses class="tc-popup-handle" to 'eat' any clicks inside it without dismissing the popup

4) The $reveal also uses style="position:relative;" to establish a new (0,0) origin for it's contents

5) The div uses class="tc-drop-down" to get the box around the content and style="position:absolute;right:0;" to set the location of the tc-drop-down, relative to the origin established by the $reveal

7) The div also uses style="min-width:fit-content;padding:0.5em;" to adjust the appearance of the tc-drop-down

I prefer the above approach over using "float" and "margin" styles, as it is more explicit in how things should be placed and will never affect anything else around it.

-e

[Mark S.]

Hi Eric,

I'm definitely putting this into my notes. It seems like something that will come up more than once.

I'm wondering if a longer term solution would be a change to the reveal widget so that you can prevent it from creating it's own style attribute. Then the resulting code could be a lot simpler. Maybe.

Thanks!