search

ProgressNS / nativescript-ui-feedback

This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Other
115 stars 21 forks source link

RadListView iOS recycling layout update issues #1337

Closed 20051231 closed 4 years ago

20051231 commented 4 years ago

Tell us about the problem

When I use RadListView with dynamic width or height template using vue on iOS, the layout is corrupted when the template is recycled.

Which platform(s) does your issue occur on?

iOS with vue

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

  1. Start the application
  2. Scroll to the bottom
  3. Scroll to the top
  4. The components in the StackLayout is not placed properly and stack together in the top of the StackLayout. (On my iPhone XS Max, usually happens in item 2)
  5. The inner Label in the horizontal StackLayout is not resized properly.
  6. The title Label of the items sometimes are not resized properly. (Showing ... but there are plenty of remaining space)

Point 4 can be partially fixed by uncommenting the code in HelloWorld.vue where the list use different template for different number of rows. After the fix, the problem will rarely occur but still there.

If I change RadListView to ListView, everything works properly instead it kills the performance.Wwhen the data is changed, the whole layout is recalculated and scrolling is not smooth. (Can be tested by uncommenting the setInterval in HelloWorld.vue

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

https://play.nativescript.org/?template=play-vue&id=i17JKo&v=4

timleland commented 4 years ago

Seeing the same issue. Any solutions?

NickIliev commented 4 years ago

@20051231 @timleland you list cells need to have a pre-defined size for iOS (limitation of the native iOS element used to create the list). Here is an example (you could use other non-hardcoded sizes - it just needs a size of some kind)

20051231 commented 4 years ago

@20051231 @timleland you list cells need to have a pre-defined size for iOS (limitation of the native iOS element used to create the list). Here is an example (you could use other non-hardcoded sizes - it just needs a size of some kind)

@NickIliev

I think you posted a wrong link since it does not use any list view component in the source code you linked.

To be clear. In this issue, there are two separate problems, one can be solved by using your solution where we explicitly specify sizes to the cell. But another problem is that the Label inside the cell does not get resized (horizontally) correctly even though it does not affect the overall cell dimensions. The Label does resize correctly if its text content is changed by bindings but not during a cell recycling phase. Maybe the issue is related to the Vue update algorithm handling v-template where it does not trigger the layout update of the Label?

Thank you.

timleland commented 4 years ago

Thanks @NickIliev so far setting the height seems to have fixed the issue