OutSystems Column Width vs. Column Widget: A Responsive Design Comparison

When creating user interfaces in OutSystems, aligning items horizontally across different devices can be tricky, especially when building responsive layouts. In today’s dev tip, expert OutSystems Developer Izam Basiron compares two common methods for creating columns in OutSystems: the traditional column width approach and the more modern column widget. He also shares practical tips for aligning items using Flexbox, a powerful tool that offers more control and flexibility for responsive designs.

Method 1: Traditional Column Width Approach

The column width method in OutSystems is a classic way to define layouts. It uses fixed fractional widths such as four-col or three-col to set column sizes.

Pros:

• Straightforward: Easy to implement for basic layouts.
• Fixed Layout: Provides a rigid structure, which can be useful for some projects.

Cons:

• Limited Responsiveness: It doesn’t adapt well to different screen sizes, especially on smaller devices like tablets or phones.
• Inconsistent Styling: Maintaining consistent styling across multiple screen sizes can be a challenge, making this method less versatile.

Method 2: Column Widget (Flexbox-Based)

The column widget, on the other hand, is based on Flexbox, a modern layout system that offers far greater control over how columns behave across different devices. Flexbox allows developers to fine-tune responsiveness, ensuring that layouts adjust smoothly depending on the screen size.

Pros:

• Fine-Grained Control: Offers flexibility over how columns adjust on different screen sizes.
• Responsive: Adapts to various devices more seamlessly, providing better control over user experience.

Cons:

• Slight Learning Curve: Flexbox can be more complex for developers who are unfamiliar with its properties.

Column Width vs. Column Widget: Side-by-Side Comparison

On Tablets

• Column Width: The layout stays the same as on a larger screen but with reduced margins, which can make the content feel cramped.
• Column Widget: Adapts based on the responsive settings you apply, allowing for more flexibility and a better fit on tablets.

On Phones

• Column Width: Often collapses into a single column, which may not be ideal for all use cases.
• Column Widget: With Flexbox, you have the power to control how columns break on smaller screens. You can decide which columns collapse first and in what order, ensuring the layout remains user-friendly.

Practical Tips for Aligning Items Using Flexbox

Flexbox is a versatile and reliable layout system that can help you create clean, professional UIs in OutSystems. Here are a few practical tips for aligning items horizontally using Flexbox properties:

1. Title with Icon

To align a title with an icon, use display: flex. Apply align-items: baseline to ensure that the text and icon are aligned along the baseline of the text. Additionally, use justify-content: space-between to push the items to opposite ends of the container. This is perfect for creating a balanced layout with titles and icons.

				
					
  
   // c/c++ .container { display: flex; align-items: baseline; justify-content: space-between; } 
  
				
			

2. Aligning Multiple Items

To align multiple items horizontally, apply display: flex and again use align-items: baseline. Add gap to create spacing between the items. To make one item fill the available space, use flex: 1. This will ensure your layout looks balanced and items are evenly distributed.

				
					
  
   // c/c++ .item { flex: 1; } 
  
				
			

3. Flex Wrap

To make sure items wrap onto the next line when the screen size is too small, apply flex-wrap: wrap. This, combined with flex: 1, ensures that your layout remains responsive and adaptable across different devices.

				
					
  
   // c/c++ .container { display: flex; flex-wrap: wrap; } 
  
				
			

Advanced Flexbox Tips with the Column Widget

Beyond basic layouts, the column widget in OutSystems can be extended with more advanced Flexbox properties:

1. Customising Column Width

You can set custom widths by using flex properties. For example, applying flex: 2 to the first and second columns and flex: 1 to the third column creates a more dynamic layout that better suits your content.

				
					
  
   // c/c++ .column1 { flex: 2; } .column2 { flex: 2; } .column3 { flex: 1; } 
  
				
			

2. Reordering Columns

Flexbox allows you to reorder columns based on screen size. For instance, you might want the third column to display first on mobile devices. By applying the order property, you can ensure that the most important content is visible first on smaller screens.

				
					
  
   // c/c++ .column { order: 3; } 
  
				
			

While the traditional column width approach is still useful for simpler layouts, the column widget, built on Flexbox, offers much more control and flexibility for responsive design. With these practical tips and advanced Flexbox techniques, you can create clean, responsive layouts that adapt perfectly to different screen sizes in OutSystems.

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.