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.
<$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>
<$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>
.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;
}
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" ?
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.
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.
<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>