OutSystems Developer Kean Amper presents a practical tip on how to transform a vertically displayed list into a horizontal format using CSS. By default, lists in OutSystems are displayed vertically, but with a few CSS tweaks, you can easily change the layout to better fit your design needs.
Step-by-Step Guide to Transforming Lists
- Default Vertical List:
- By default, lists in OutSystems are displayed vertically. This is the standard behavior.
- Inspecting the List:
- Start by inspecting the list element in your OutSystems application. Identify the parent CSS class of the list component.
- Overriding CSS:
- To change the list from vertical to horizontal, you'll need to override the default CSS. Here's how Kean did it:
- Set the parent element to display as flex.
- Adjust the list item to display as two columns, each taking up 50% of the width.
- Applying the Changes:
- Implement the following CSS rules:
.parent-class {
display: flex;
flex-wrap: wrap;
}
.parent-class .list-item {
width: 50%;
}- This will display the list items in two horizontal columns.
- Customising the Layout:
- Depending on your requirements, you can adjust the column count. For instance, if you want the list to be displayed in three columns, modify the width:
.parent-class .list-item {
width: 33.33%;
}
- This will arrange the list items into three horizontal columns.
Practical Example
Kean demonstrates this technique by taking a default vertical list and transforming it into a horizontal layout. Initially, the list items are stacked vertically. By applying the CSS overrides, the list items are displayed in a more compact and organised horizontal format.
Benefits of Horizontal Lists
- Improved Layout: A horizontal list can improve the visual layout of your application, making it more user-friendly.
- Flexible Design: Adjusting the number of columns allows for a flexible design that can cater to various screen sizes and design preferences.
- Enhanced User Experience: Organising items horizontally can enhance the user experience by presenting information in a more accessible manner.
Transforming a list from vertical to horizontal in OutSystems is a simple yet effective way to improve the design and usability of your application. By using CSS tricks, you can easily customise the layout to meet your specific requirements.