Out of the box, OutSystems UI provides Card Sectioned and a generic Section component, which are containers that separate a placeholder into smaller sections such as title, content, and footer. There’s no dedicated section component for Popup dialog, and here’s what it looks like when we use the Section component with Popup dialog:
At first glance, it looks acceptable except for some minor UI issues. If the content is too long, the user would have to scroll down to see the buttons at the bottom. For a popup, ideally, I want to be able to see the title and buttons. Here are the steps I did to create a reusable section component for the Popup dialog.
First, create a Block called ‘PopupSection’. Drag a container and place three placeholders inside it. I named the placeholders ‘Title’, ‘Content’, and ‘Footer’ and set the style class to ‘popup-section_title’, ‘popup-section_content’ and ‘popup-section_footer’, respectively.
If we replace the Section component earlier with our PopupSection component, it will look the same, but without the unwanted separator. I only want the content section scrollable, so I need to disable scroll on the popup and remove the padding. For a custom component like this, I usually add a new CSS class. In the style class of the Popup dialog instance, I add ‘popup-dialog-section’ and below CSS:
.popup-dialog.popup-dialog-section {
padding: var(--space-none);
overflow: hidden;
}
Next, go back to the PopupSection component. I want to use Flexbox to arrange the placeholders. The placeholder should be stacked vertically, where the Content placeholder expands to fill the height. Click on the container and set the style class to ‘display-flex flex-direction-column flex1’. These are OutSystems UI CSS classes, so no need to define our own. Add the following CSS:
.popup-dialog-section_title { padding: var(--space-base); } .popup-dialog-section_content { padding: var(--space-none) var(--space-base); overflow-y: auto; flex: 1; } .popup-dialog-section_footer { padding: var(--space-base); }
The last step is to make the containers between the Popup dialog and PopupSection align. Replace the earlier CSS with the one below to ensure it fills up the available space:
.popup-dialog.popup-dialog-section { padding: var(--space-none); overflow: hidden; display: flex; } .popup-dialog-section .popup-content { flex: 1; display: flex; } .popup-dialog-section .OSBlockWidget { display: contents; }
One thing I like to note is the class ‘.OSBlockWidget’. This CSS class is a wrapper that OutSystems automatically creates for a Block element that can get in the way of layout alignments. If you ever wish it wasn’t there, use display: contents. The final CSS should look like below:
.popup-dialog.popup-dialog-section { padding: var(--space-none); overflow: hidden; display: flex; } .popup-dialog-section .popup-content { flex: 1; display: flex; } .popup-dialog-section .OSBlockWidget { display: contents; } .popup-dialog-section_title { padding: var(--space-base); } .popup-dialog-section_content { padding: var(--space-none) var(--space-base); overflow-y: auto; flex: 1; } .popup-dialog-section_footer { padding: var(--space-base); }
Stay tuned for more Dev Tips.
Izam Shah Basiron
Senior Frontend Developer
