How to make a popup Overlay movable and resizable?
Hi,
I would like to make an Overlay popup movable and resizable, how do I achieve that?
Thanks and regards,
Jacky
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Pegasystems Inc.
IN
Hi Jacky,
To make the Overlay resizable, you will have to add a custom format of Overlay. I have added a screenshot below with the custom format and named it as "Resizable". You can test the movable requirement in the same way. The attribute for moving is "Position".
Regards,
Evita.
Pegasystems Inc.
SG
Hi Evita,
I just noticed that "resize" does not work for IE. I came across using JQuery and that Pega includes that. How could that be used here?
Also, the position attribute does not seems to work. I tried using it and setting the position to be absolute and left:0px;top:0px, hoping that it would popup at the top left corner with reference to the browser, but it is still at the default location near to the button where it was launched.
Kindly let me know if you have any ideas on the resize for IE (JQuery) or sample format for the above Position.
Thanks and regards,
Jacky
Pegasystems Inc.
IN
Hello Jacky,
In IE, resize attribute is not supported. Refer https://www.codeproject.com/Questions/655069/dragable-textbox-and-placeholder-within-that-textb in this regard. Sample referred from https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize.
In Pega7 - Jquery is included by default (version 1.11) and Jquery UI (version 1.10.3). You can include JS files on the portal harness (see advanced tab) - if you use a single-document dynamic container, then your JS would be available everywhere.
Another option is to add a reference of the JS file into the HTML fragment called "UserWorkform"
Save this fragment into your application ruleset, and add the following lines
<pega:static type="script" app="webwb">
<pega:file name="NEWJSFILE.js"/>
</pega:static>
Hello Jacky,
In IE, resize attribute is not supported. Refer https://www.codeproject.com/Questions/655069/dragable-textbox-and-placeholder-within-that-textb in this regard. Sample referred from https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_resize.
In Pega7 - Jquery is included by default (version 1.11) and Jquery UI (version 1.10.3). You can include JS files on the portal harness (see advanced tab) - if you use a single-document dynamic container, then your JS would be available everywhere.
Another option is to add a reference of the JS file into the HTML fragment called "UserWorkform"
Save this fragment into your application ruleset, and add the following lines
<pega:static type="script" app="webwb">
<pega:file name="NEWJSFILE.js"/>
</pega:static>
Try sample JQuery code in the UserWorkForm:
<script>
$(document).ready( function() {
console.log("Log: called from ready....")
$("#po0").resizable();
} );
</script>
Here, po0 is the overlay element to be resized.
Regards,
Rincy
Pegasystems Inc.
SG
Hi Rincy,
This is interesting, I will try it when I have time. I had also inspected that the ID for the Overlay is "po0", but I am not sure would this ID be changed in future version of Pega? Is yes, this would break for future versions.
Regards,
Jacky
Pegasystems Inc.
IN
Hello Jacky,
Thanks for posting your query in PSC :)
By movable, my understanding is that your requirement is to have overlay as drag-able. Is my understanding correct?
If yes, then there exists an enhancement request raised for this. Refer the post.
Regards,
Rincy
Pegasystems Inc.
SG
Hi,
Using JQuery (similar to your sample code above), I am able to make it movable as well as resizable, however there exists 3 problems:
1) For IE, the user experience is not good, dragging is a bit sluggish and controlling it is very awkward.
2) When draggable is enabled, clickable will not work, which I require, because the PDF viewer has the ability to zoom in and zoom out, which would not work then.
3) The 'Resize' handle sometimes appear in the middle-right rather than at the bottom-right, so it would be confusing to implement this.
In the end, I had reverted to using a section instead.
Thanks for the help!
Regards,
Jacky