I need a button that when clicked will make the content show on the left side of the button. But the position value in the reveal widget doesn’t seem to have what I need. I’ve tried every one of them, but can’t get to the full left side. Is more css needed? Or do the core need to add functionality? Even though I’m wary of core add functionality as well, the reveal widget is so important to TiddlyWiki that it maybe worth taking a chance on it.
Try this:
This content pushes the button to the right so the popup content has room to fit to the left
<$let popid=<<qualify $:/state/popup/demo>>>
<$button popup=<<popid>>>click me</$button>
<$reveal type=popup state=<<popid>> position=left>
<div style="border:1px solid;background:white;padding:0 1em;">popup content here</div>
</$reveal>
</$let>
Notes:
- The initial content is only there so the
$buttonisn’t drawn up against the left edge of the tiddler. This leaves room for the popup content to be drawn to the left of the$button. Any content will do. - Alternatively, you could add
style="float:right;"to the$buttonwidget so it is automatically displayed up against the right edge of the tiddler. - In either case, the
$revealpopup content will not overflow the tiddler’s left edge. If there’s not enough room, it will be displayed up against the left edge of the tiddler, and will overlap with the$button. - The
<div style="border:1px solid;background:white;padding:0 1em;">surrounding the popup content is just for appearances, so the popup content isn’t mixed in with any content that is already displayed to the left of the$button.
However, there is a way to take more precise control of the popup position, like this:
<$let popid=<<qualify $:/state/popup/demo2>>>
<span style="position:relative;">
<$button popup=<<popid>>>click me</$button>
<$reveal type=popup state=<<popid>> position=left>
<div style="position:absolute;right:0;border:1px solid;background:white;padding:0 1em;">popup content here</div>
</$reveal>
</span>
</$let>
Notes:
- The
<span style="position:relative;">establishes a new display “origin” corresponding to the top-left corner of the$buttonthat follows it. - The popup content wrapper style then uses
position:absolute;right:0;to force the popup content to appear right-aligned with the new display origin. - The
position:absolute;allows the the popup content to overflow the tiddler’s left edge, but it will not overflow the outermost document (page) container and will word-wrap as needed. - If you add
white-space:nowrap;to the content wrapper style then it WILL prevent the word wrapping and force the content to overflow the document container.
enjoy,
-e
1 Like
Thank you very much for your reply, but I have one more problem. As shown in the two pictures below. When the story river has no content, the content can be displayed normally. When there is content, it is blocked. I know this is a stacking priority issue. But I set the z-index and it didn’t work.
Here is the test URL.
https://dongrentianyu.github.io/sin/
The problem becomes more problematic. There is no stacking problem on the test URL, but my local wiki has it, so it looks like I’ll have to look into it some more.
