Block inside list display issue
Application Type


I am using a Block inside a list to create a nested list effect.

My requirement is that, i have a Client who have different bookings completed. Each Booking have its own details as well. So i used a Block for each of these lists and nested them.

When i view it, i can see that each block is taking only 50% of the actual space. I checked all the containers and list size and all of them are set to Fill. Still it is automatically resizing to 50%

I was able to fix this using a workaround - Created a Right swipe action on each list inside the block and it automatically fitted back to 100%. But i dont need a Right swipe here and it is not looking good.

Have anyone encountered this issue with Block inside a List? If So any fix to this?




I also had the same observation while creating the mentioned scenario. Sorry! I don't know why it's happening so i.e. the .list-item style class definition is by default set to width: 50%;

As a solution what you could do is, define/override the default style class definition with the below mentioned CSS definition in the nested-block stylesheet section:

CSS Snippet:

[data-list-item] .list-item {
    width: 100%;

Hope this helps you!

Kind regards,

Benjith Sam

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