On Mobile list view, div style="height: 0px;" getting inserted on scroll

On Mobile list view, div style="height: 0px;" getting inserted on scroll

  

I have a list in a mobile screen.  When the screen first appears, the list renders perfectly, but as soon as the user scrolls, the first list item gets garbled.  I tracked down the symptom to a style="height: 0px;" getting inserted when the scroll happens.  I haven't been able to find the JS that causes this, and even if I do, I'm not sure how to fix it.

If I manually delete style="height: 0px;" in the browser inspector, my screen looks fine again.

Here is resulting style attribute getting inserted:

How the mobile screen looks as a result:

The screen structure:

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".

Niek de Jong wrote:

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...


I have the same issue as Niek, at least I think so. Have several apps with a detail page. Below the detail I have a list with additional data. This always was working fine. After some update (don't remember which one), the first and last entry of the list are garbled. If I click on the second item of the list (which has a link) and then go back, the list is OK.

Regards,

Peter Nijhuis aka CasaSpider.

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.


Lars van de Westelaken wrote:

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.



This work-around works perfectly. Thanks, Lars!

Regards,

Peter Nijhuis aka CasaSpider.

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.

Solution

Russell Codd wrote:

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.


After reporting the bug to OutSystems, they advised me the same workaround on the new platform version. This appears to work in our applications!