50
Views
5
Comments
Solved
How to center content in a list-item?

Hi everybody, I'm working on a list right now, and I'd like to center the content within the list-items (see image 1), instead of having them "top-aligned" (see image 2). I'm not sure how to do this. Does anybody have any tips?



17.04.2023 - Centered.png
17.04.2023 - Top-aligned.png
2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Lotte,

In Outsystems UI, there's the AlignCenter widget under Utilities for this.

Dorine

UserImage.jpg
Lotte1994

Thanks a lot! That's really helpful!! 

The only issue I now have, is that the icons within the tags are not displayed next to the text, but on top of them instead. Do you happen to have a solution for this?



2021-09-06 15-09-53
Dorine Boudry
 
MVP

i think this is a problem of width, probably, i.e. you have only assigned 1Col to the status container, but an icon + "openstaand" just doesn't fit into it ?  

Maybe by adding the CenterAlign, something changed in that area ?

can you share maybe the widget tree to help see ?  And / or share the dom tree in chrome dev tools.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

unfortunately, sharing code over the forum is currently not working :-(

2022-06-23 06-21-50
Siddharth Vyas

Hey ,
Can you share the OML so that I can help you with the precise solution.

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Lotte,

In Outsystems UI, there's the AlignCenter widget under Utilities for this.

Dorine

UserImage.jpg
Lotte1994

Thanks a lot! That's really helpful!! 

The only issue I now have, is that the icons within the tags are not displayed next to the text, but on top of them instead. Do you happen to have a solution for this?



2021-09-06 15-09-53
Dorine Boudry
 
MVP

i think this is a problem of width, probably, i.e. you have only assigned 1Col to the status container, but an icon + "openstaand" just doesn't fit into it ?  

Maybe by adding the CenterAlign, something changed in that area ?

can you share maybe the widget tree to help see ?  And / or share the dom tree in chrome dev tools.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

unfortunately, sharing code over the forum is currently not working :-(

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.