Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

LayoutPopup

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The Layout for the RichWidgets Popup Editor.

    Useful to display additional off-canvas information.

    How to use

    1. In the Popup screen, select the object tree and set the layout to LayoutPopup.

    2. Add your content inside the layout.

    3. Use this screen as destination for the RichWidgets Popup Editor.

    Input Parameters

    Input Name Description Type Mandatory Default Value
    DeviceConfiguration Configuration to change the default values that set when the application will be seen as phone, tablet or desktop DeviceConfig False none

    Layout and Classes

    MainContent

    Drag your content to this placeholder.

    Advanced Use Case

    Customize your responsive breakpoints

    1. Go to the Common Flow.
    2. Double-click the Layout to open the widget tree.
    3. Go to the LayoutPopup properties.
    4. Toggle the DeviceConfiguration 'plus icon'.
    5. Set the custom breakpoints (in pixels). In the example below, the phone breaks are set to happen only when the Device width is at 200px.
    6. Publish and test.

    Notes

    In Internet Explorer 10 and 11, we added some specific behaviors to account for the flicker caused by the slow loading time of polyfill CSS Variables. If there are any JavaScript errors, this will cause the screen to appear white.

    You can override the following code to avoid this behavior.

    .ie10,
    .ie11 {
       display: none;
    }
    
    .ie10.ponyfill-ready,
    .ie11.ponyfill-ready {
       display: block;
    }
    

    Compatibility with other Patterns

    RichWidgets Popup Editor

    • Was this article helpful?