I'm having trouble getting content in two columns to center against each other. I've asked this question before, and tried the solution there, https://www.outsystems.com/forums/discussion/89494/align-center-two-elements/ , but it still produces this:
It's a work in progress, so please don't mind the clutter. But what I'm trying to do is center the PROJECT content and the 1World content vertically to each other.
Here's the widget tree:
I've tried putting display-flex align-items-center in several different places, but nothing works. Any ideas?
PS, yes, the ColumnsMediumRight is intentional, there will be other items there eventually. If you click on one of the Kanban cards from this Bootstrap theme, that's essentially what I'm trying to recreate. This is all within a popup on a screen.
adding "display-flex align-items-center" to the ExtendedClass property of the Adaptive\ColumnsSmallLeft widget did the trick.
Hi @Daniel Johnson ,
the concept of columns is at odds with aligning items in them vertically. The natural way to use columns, is that you don't care where any element in the left column is, related to elements in other columns. (much like for example the lanes in your kanban board)
So your individual columns are aligned at the top, each column just lays out it's content from top to bottom without regard for what happens in the other one. If I set up a structure as yours, that's what i see, the word project and the word 1World are aligned at the top, even if they are a different size. Do you have any other css already going on, as that doesn't even seem to be the case in your screenprint ??
For me, this already looks like how it should be, I wouldn't feel the need to center things.
You don't want to center the whole content vertically, I'm assuming ?? only the top word in the left column to the top word in the right column ?
I personally would not use the column widget, so yes to the ColumnsMediumRight, but no to the ColumnsSmallLeft. Just use two containers side by side, one width 4 cols, the other 8cols, or something like that.
So start a new duo of containers for each title, and put those inside an AlignCenter widget. For the rest of the content in the right bit that doesn't have to align to the left caption, just add an empty left container, and a filled right container, not wrapped by a AlignCenter widget.
see attached oml, the center aligned screen.
Dorine