Idea - Add ExtendedClass property to Column Placeholders

Champion

Add ExtendedClass property to Column Placeholders

New

OutSystems UI

When using the Columns widget, it’s hard to control vertical alignment of the content in each individual column. The common workaround, wrapping each column’s content in an extra Container to attach classes doesn’t always behave well.

My proposal is to add an ExtendedClass property on each column placeholder inside the Columns widget. These classes should be applied directly to the column wrapper element that encloses the placeholder’s content.

12 Aug 2025

Ricardo Reis

Hi Mihai,

You can accomplish that by setting the Extended Class of the "Columns2" widget itself and then writing some CSS code that implements the behaviour you're looking for using CSS selectors that include the extended class you set.

So, your selectors would be like:

.columns.columns2.your-extended-class > .columns-item:nth-child(1) {...}
.columns.columns2.your-extended-class > .columns-item:nth-child(2) {...}

Hope it helps.

Regards.

26 Aug 2025

Mustafa Emad Shaker

I agree with Ricardo, all OutSystemsUI widgets has a fixed html pattern. You just need to add a parent element using the ExtendedClass property, and following the widget pattern using CSS.

Another ways is adding the class to a container, for example, inside the column, and using the "has" selector to apply style to the placeholder.

To make it clear, I agree that it would be better to be able to add class directly to the placeholder.

08 Nov 2025