Dev Tip: Transform OutSystems List from Vertical to Horizontal Using CSS

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

1. Default Vertical List:
   • By default, lists in OutSystems are displayed vertically. This is the standard behavior.
2. Inspecting the List:
   • Start by inspecting the list element in your OutSystems application. Identify the parent CSS class of the list component.
3. 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.
4. 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.
5. 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.

Want to learn more valuable Dev Tips?  Sign up for our newsletter and stay updated with the latest insights! Also, don’t forget to check out our upcoming OutSystems courses to scale your career.