129
Views
8
Comments
Solved
How to allign the icons in the containers on the list

Hello, I need to allign this 3 icons (which only it shows if an expression is true, so it can be one icon, 2 or even the 3 of them.


But, i am struggling with the UI part. Because it's a list, i have a parent container

And inside of it, i have 3 little containers that now have (3 col as witdh). I already try to use the align center, but it don't work, and i am not so good in UI to can solve this. What should i do? i only can see the icons in this diagonal or align but vertically.

Some help?

2020-07-27 11-07-36
Diksha Magre
Solution

Hello 


make parent container with 3 col and inside the  all Containers make full width. this will remove your warning.


hope this will help you

2025-12-12 06-45-53
Nandhakumar Sureshbabu
Solution

Hi @Toretto,

.container{
display:flex;
align-items:center;
justify-content:space-evenly;
}

Mention the class name in the enclosing container / wrapper of the icons. 
Note: All 3 icons should be wrapped in a single container.

Hope it helps.

Regards,
Nandhakumar S.

2024-05-08 05-59-38
Gayatri Kapadi

Hi Toretto,

Try to use adaptive column 3 instead of three different containers. 

This might work in your case.

Regards,

Gayatri


UserImage.jpg
vikas sharma
Champion

Hi,

Could you please share oml for this.

regards

UserImage.jpg
Pedro Ricarte

The 3 columns solution doesn't work, because i am using if data, so he creates the space to put something

@Vikas Sharma sorry i cannot do it because i have sensitive data in this module


UserImage.jpg
Pedro Ricarte

The solution that i want results like this, but the list gain that warning, because i haven't a single direct child, but this works

2020-07-27 11-07-36
Diksha Magre

Hi Toretto ,

you can remove the first container inside the list  and make  3 col all containers in style sheet

hope this will help you

Thanks

Diksha Magre


ListOficon.oml
UserImage.jpg
Pedro Ricarte

But then i will have this situation: i haven't a single direct child on the list and pops up a warning.

And if it is to pops up that warning i prefer do not have any container because results as well

2020-07-27 11-07-36
Diksha Magre
Solution

Hello 


make parent container with 3 col and inside the  all Containers make full width. this will remove your warning.


hope this will help you

2025-12-12 06-45-53
Nandhakumar Sureshbabu
Solution

Hi @Toretto,

.container{
display:flex;
align-items:center;
justify-content:space-evenly;
}

Mention the class name in the enclosing container / wrapper of the icons. 
Note: All 3 icons should be wrapped in a single container.

Hope it helps.

Regards,
Nandhakumar S.

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