Skip to Content (Press Enter)
Community › Forge › Assets list › FloatingPopupPro
floatingpopuppro
Reactive icon

FloatingPopupPro

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 7 Apr (18 hours ago)
 by 
5.0
 (1 rating)
floatingpopuppro

FloatingPopupPro

Documentation
1.0.0

FloatingPopupPro is a high-performance utility block that adds "Desktop-like" window management to your OutSystems Popups. It enables users to drag and resize popups in 8 directions with zero visual flickering.

Where to Place the Block

To ensure the component works correctly with the OutSystems UI lifecycle:

  1. Open the Popup where you want to add the functionality.

  2. Drag the PopupFlexPro block and drop it inside the "Content" placeholder of the Popup.

    • Note: It is recommended to place it at the very top or very bottom of the Content placeholder to keep your development canvas organized.

Input Parameters

ParameterTypeMandatoryDescription
PopupIdTextYesThe Runtime ID of the Popup widget. Pass the Id property of your Popup (e.g., MyPopup.Id).
WidthTextNoThe initial width of the popup. Supports any CSS unit (e.g., "600px", "80%"). Default: "500px"
HeightTextNoThe initial height of the popup. Supports any CSS unit (e.g., "400px", "auto"). Default: "auto"
OnCenterBooleanNoIf set to True, the popup will automatically calculate and move to the center of the screen upon opening. Default: True

How to Use (Step-by-Step)

  1. Name your Popup: In the Service Studio, ensure your Popup widget has a Name (e.g., ClientDetailPopup).

  2. Insert the Block: Drop PopupFlexPro inside that popup.

  3. Map the ID: In the PopupId input of the block, type ClientDetailPopup.Id.

  4. Configure Dimensions:

    • Set Width to your desired size (e.g., "700px").

    • Set OnCenter to True for a professional entrance.

  5. Publish: Your popup is now draggable via the header and resizable from any edge or corner.

Important Technical Notes

  • Header Selection: The "Drag" functionality automatically detects the .osui-popup__header or .popup-header classes. Ensure your popup has a title or header area for the best experience.

  • CSS Conflicts: This component forces position: fixed and transform: none on the popup to allow free movement. It overrides standard OutSystems centering to prevent "jumping" issues.

  • Z-Index: The block sets a z-index of 1001 by default to stay above the standard overlay.

Troubleshooting

  • Cursor not changing? Ensure you don't have a container inside the popup with a fixed width/height that is blocking the edges.

  • Popup not moving? Check if you passed the correct PopupId. The block needs this to find the specific HTML element in the DOM.