Forums Home / Wijmo / General Discussion
Posted by: steidle on 28 March 2024, 7:25 pm EST
steidle
Posted 28 March 2024, 7:25 pm EST
I would like to use a Popup as “normal” window where my code or the user controls the position by dragging. Popup.show() or resizing the browser window impose an “auto-center” on the popup. How can I turn this off in both cases?
sonu.pandey
Posted 1 April 2024, 12:07 am EST
Hello,
To achieve the desired functionality, you must first handle the “dragged” event and store the last dragged position. Then, you can handle the “showing” and “refreshed” events to set the last dragged position of the popup, ensuring it maintains its last dragged position on the screen.
var oldTop;
var oldLeft;
popup.refreshed.addHandler((s, e) => {
if (oldTop) s._e.style.top = oldTop;
if (oldLeft) s._e.style.left = oldLeft;
});
popup.showing.addHandler((s, e) => {
if (oldTop) s._e.style.top = oldTop;
if (oldLeft) s._e.style.left = oldLeft;
});
popup.dragged.addHandler((s, e) => {
oldTop = s._e.style.top;
oldLeft = s._e.style.left;
});Here is a sample: https://stackblitz.com/edit/js-pc3dhw?file=index.js
Regards
steidle
Posted 1 April 2024, 5:05 am EST - Updated 1 April 2024, 5:13 am EST
Hi Sonu!
Thank for your explanations and the code sample. The code works but it’s only a workaround as it fixes the centering after it happened. My question was if there is a way to turn the centering off altogether. I have a window which is initially snapped on the bottom right.
popup.hostElement.style.cssText += 'top:auto;bottom:20px;left:auto;To handle this case as well your code would have to get quite complicated - to have the popup NOT do something. Never mind.
To bad a lot of trickery is needed to use Popup to something seemingly simple. Has the dev team ever considered to add a autoCenter property which is true by default but can be set to false? It might be possible to cover an additional use case with few code…
Regards
vivek.pannu
Posted 3 April 2024, 1:32 am EST
Hi Andreas Steidle,
Thank you for your suggestion for the ‘autoCenter’ property. For now, the Popup control has a property named ‘owner’ which sets an owner element for the Popup, after setting this property the Popup position can be controlled by using the ‘position’ property of the Popup. But, when the owner element is not set, then the Popup behaves like dialogs, which are usually centered on the screen. And this is a very rare use case, when there is no owner element for the popup, and it’s position is to be shifted somewhere else other than the center position. Hence, for now, there is no such property available like ‘autoCenter’.
And as per the current Popup structure, when the popup is shown, the popup element is inserted at the top left corner and then shifted to the center of the page through CSS, which is necessary as page size may not be the same each time when the popup appears. So, if we plan to add a property to show the popup at the same position again, we need to store the popup position and shift it to the same position when the popup appears again, which is the same thing that we shared in the solution in our last comment. And showing the popup at the same position again also introduces some unexpected behavior in some situations like, if the popup’s last position is in the bottom right corner of the page, and then the page size is reduced by the user, then when the popup is shown again, it will be shown at the same position again, which may add a scrollbar to the webpage and scroll the page to show the popup.
So, for now, as this is a very rare use case, there are no current plans to add this property to the Popup control.
Regards
steidle
Posted 10 April 2024, 8:54 am EST - Updated 10 April 2024, 9:33 am EST
Dear Vivek Pandu
I have used the Popup quite a bit with and without “owner”. I understand your concerns for the 80% who simply need a centered dialog window.
However, you are offering Popup.isDraggable (which I also use for a “normal window”)
https://developer.mescius.com/wijmo/demos/Input/Popup/DraggableDialogs/purejs
In the sample, drag the window, then resize the browser window. - The popup jumps back to the center. With isDraggable=true this should not happen. If the user wants the window at a certain position, then the framework should patronize the user.
So my “autoCenter” was maybe a misleading, it’s more that Wijmo is not fully respecting the consequences of isDraggable. The concepts of user-positioning and auto-center are per-se contradictory. It’s either one or the other.
You claim it can only work with a mix of both. I would say for isDraggable it’s unexpected behaviour, if not a bug.
Still, thanks you for the workaround.
vivek.pannu
Posted 10 April 2024, 8:34 pm EST - Updated 10 April 2024, 8:39 pm EST
Hello Andreas,
The Popup is designed this way that, it is automatically positioned to the center position when screen size is altered. As we mentioned earlier, there is a use case, when the user may drag the popup in the extreme corner, and at that time if the page is resized, then the popup may be shifted out of the view, which would not be the expected behavior, as the popup should always remain visible when in opened state. Please refer to the attached image for the same.
As this is a rare usecase, to make the popup to retain it’s position after dragging, we suggest to use the workaround we shared earlier.
If there are any other specific usecases, where the center position is not expected, then please let us know.
Regards
