Is it possible to align list items by justifying them to flex-start

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

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

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.




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

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


Thanks for the support.

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

Hi Giorgos,   

Please have a look into above OML.

Hope this will help you.

Regards,

Vipasha

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?


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

Solution

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.

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 

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.

Hi Giorgos, 

Glad to help you.

Happy Coding!!!!!

Regards,

Vipasha