514
Views
12
Comments
Solved
Is it possible to align list items by justifying them to flex-start
Question

How can somebody achieve this with the List and List.Item:

2023-03-09 07-10-59
Vipasha Sharma
Solution

Hi Giorgos,   

Apologies from my end I miss understood your issue,I've made some changes in above OML consider items will align in horizontal manner instead of vertical manner. Please have a look into above OML hope this will help you.

Regards,

Vipasha

TestCSS.oml
UserImage.jpg
Giorgos Sgouridis

Thank you a lot Vipasha for this solution!

Before i can mark the answer as the solution can you give me some advice
how was implemented. Strangely i do not see anymore the WidgetTree.
Do you still use a List? As i want also to change the style of items on click
i would need to use a List.Item with the solution and make it work with variable
widths as the text of the item might vary on its length.

2023-03-09 07-10-59
Vipasha Sharma

Hi Giorgos,

You can do this using two ways

1. By using "align-items: stretch;" or "align-items: flex-end;" into your CSS.

2. Follow the below steps: 

Step 1: Put list or list item into container and make their "height = 100px" and width = "Fill".

Step 2:Make the height = "100px" and width = "100px" of list or list item.

Hope this helps you.

Regards,

Vipasha

UserImage.jpg
Giorgos Sgouridis

Vipasha Sharma wrote:

Hi Giorgos,

You can do this using two ways

1. By using "align-items: stretch;" or "align-items: flex-end;" into your CSS.

2. Follow the below steps: 

Step 1: Put list or list item into container and make their "height = 100px" and width = "Fill".

Step 2:Make the height = "100px" and width = "100px" of list or list item.

Hope this helps you.

Regards,

Vipasha

 

Hi Vipasha,

Container
height: 100px; width: fill;
list
height: 100px; width: 100px;
list-item
height: 100px; width: 100px;i added align-items: stretch; on container and the other controls but it didnt work.
What do i miss? Thanks for your help.




2023-03-09 07-10-59
Vipasha Sharma

Hi Giorgos, 

Can you please share snapshot of widget tree of you and more details around this for my better understanding.

So that I can understand is there any other element or item which occupy extra space in your screen.

Regards,

Vipasha

2023-03-09 07-10-59
Vipasha Sharma

Hi Giorgos,  

Please try with below CSS code:

1.margin-bottom: 0px; 

2.padding-bottom: 0px;

If it still not solve you problem I request you to please share snapshot of your widget tree.

Regards,

Vipasha


UserImage.jpg
Giorgos Sgouridis

Thanks for the support.

I created an oap out of the screens layout.
Maybe this helps to work on it.

playground.oap
2023-03-09 07-10-59
Vipasha Sharma

Hi Giorgos,   

Please have a look into above OML.

Hope this will help you.

Regards,

Vipasha

TestCSS.oml
UserImage.jpg
Giorgos Sgouridis

Thank you for the support Vipasha.

I still dont see the expected behaviour with the items justified from the start
being added to the right and then continue to the next row.
https://giorgos.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/test1/home?_ts=637329340321415270

Is something missing from the attached oml?


2023-03-09 07-10-59
Vipasha Sharma
Solution

Hi Giorgos,   

Apologies from my end I miss understood your issue,I've made some changes in above OML consider items will align in horizontal manner instead of vertical manner. Please have a look into above OML hope this will help you.

Regards,

Vipasha

TestCSS.oml
UserImage.jpg
Giorgos Sgouridis

Thank you a lot Vipasha for this solution!

Before i can mark the answer as the solution can you give me some advice
how was implemented. Strangely i do not see anymore the WidgetTree.
Do you still use a List? As i want also to change the style of items on click
i would need to use a List.Item with the solution and make it work with variable
widths as the text of the item might vary on its length.

2023-03-09 07-10-59
Vipasha Sharma

Hi Giorgos,    

Here I've consider below points:

  • Having just a Container inside the List widget (no ListItem or other stuff).
  • Inside the container insert whatever you want (in your case the image and the expression).
  • In the Container and in the Expression remove/delete whatever it is in the Width property.

As if you use list item inside of list widget then it will not work because records bind with list item will have their own alignment and there is no option for line item to align records in horizontal manner even if you enclose list item inside the container.

Changes are done in "home" screen.

Regards,

Vipasha 

UserImage.jpg
Giorgos Sgouridis

Thanks a lot Vipasha, i could arrange the selectedItem style change without ListItem.
As you noted is mostly for the swipe actions designed and has its own alignment.

2023-03-09 07-10-59
Vipasha Sharma

Hi Giorgos, 

Glad to help you.

Happy Coding!!!!!

Regards,

Vipasha

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