Hi David,

I have used list element several times in OutSystems mobile apps but never gone through such issue.

Is there any style classes you are using for ListItemsContainer?

Moreover, if you are not using class, you can also define your own class to that container and use css to apply min-height property if required. You can also use !important after css property value to override the height which is causing issue in your app.


Regards,
Palak Patel

Hi David,

It seems there is customized css applied and there is a validation (*required field) which overlaps the defined css.

If this occurs only during those validation, then you need to find the validation elements and add appropriate style to it.

Thanks,

Keerthi

Thank you for the suggestions on items to check.  My first instinct was checking the style sheet, and there is nothing in the style sheet or applied to the elements.  Note the fact "I tracked down the symptom to a style="height: 0px;" getting inserted when the scroll happens".  This points to a JavaScript insertion of the style during OnScroll event.  

Yes, I can insert a minimum height style as a workaround; however my content is variable and when it is longer than the min height, which is often, it still looks terrible.

I'm curious what JavaScript might cause this and how to find out.

Hi David,

If you can share .olm file where this scenario is reproducible then might we can help.

Regards,
Palak Patel

I got something similar to your case. Is this still occurring to the on scroll event?

Is there a relationship between the upgrade to platform version 10.0.823.0?

Quoting from the release notes of that platform version:

• Fixed issue in mobile apps that caused the first and last elements of virtualized lists with the data source set to an Aggregate to be rendered with a height of 0 pixels. (RPD-3300)

But the strange thing is, that this problem occurs in our application after upgrading to this platform version...

This is happening in one of my applications too and I noticed it in the Customer App Template when you view a bank account and scroll the "Last Transactions".

This problem is mentioned in several other posts as well. Check https://www.outsystems.com/forums/discussion/36643/list-view-items-getting-overlap/ for a workaround (last post of vikas sharma). Outsystems does not like the workaround, because it's giving a "List should have a single direct child. Enclose the child widgets inside a single widget to improve performance, e.g. use a container." error. But so far, I have seen no other solution.

I was advised to add the attribute "disable-virtualization" to the list as follows:

and this has worked in my personal environment which has not yet been upgraded to the platform version where this bug is fixed.

Russell you are the MAN. Thanks.

This workaround works well also for React.

I'm using SS 11.13.1 Build 53655 on a Reactive app and this issue is still happening. Tried applying the disable-virtualization=true on the extended properties and didn't work.

Meanwhile I did a workaround and forced a css height: auto !important. 

My issue was only happening on radio-group pattern to I simply applied the following to my theme:

.radio-group {
height: auto !important;
}

This solved the issue for me. 

A more generic CSS workaround could be something like:

.list > div:first-child {
height: auto !important;
}

But in doing this I noticed .list css was not being applied. Upon a closer look I found some inconsistency on the list pattern html class attribute:

Also the disable-virtualization attribute on the extended properties is not showing here but once I remove the quotes before list and after list-group the attributes show up in the HTML and the classes are transformed to attributes

Hope this helps.