Collapsed items, not filling the whole scrolling space

[graphefruit]

Hey @ericferreira1992,

I've added in a last update in my app, the possibility to "collapse" the coffee brews.
Interesting is that I got about 789 items, and 4 are just rendered, even so there would be enough space for 2 more:

When I expand the brews it takes the whole scroll container:

Do you have any idea whats happening here and what I could do?

My container is set like:

 <ag-virtual-scroll #archivedScroll [items]="archiveBrewsView" height="100vh"  [min-row-height]="isCollapseActive()?98:180">

Setting the min-row-height to "auto" is a bit fixing this issue, but still not taking up the whole space.

Thank you so much for your support!

[graphefruit]

Adding to this.

The issue coming from was the attribute height=100vh

The solution I did now was:
[height]="segmentScrollHeight"

and in code behind I calculate and set this:
this.segmentScrollHeight = calculcatedPX;

And then I recalculate aswell when orientation-change is triggered.

The funny thing is rather: 100vh is working on expanded elements but not on collapsed once

[ericferreira1992]

@graphefruit, I just launched a new v1.9.2 on NPM, fixing this bug in ag-virtual-scroll. Try to update and let me know after.

[graphefruit]

Hey @ericferreira1992
Thanks for the fix.
Yes and no in once.

I've changed my code back to 100vh, and now it collapse to the bottom, but the difference between 1.9.0 and 1.9.2, is that there is now very much blank space:

1.9.0:

1.9.2:

on bigger tiles this issue shines more:

[ericferreira1992]

I'm struggling to replicate this behavior 😅. But I'll get it done and solve it! I let you know @graphefruit.

[graphefruit]

@ericferreira1992
If you're a bit familiar with Ionic you can install the develop-branch of Beanconqueror.
I can also give you a helping hand so.
Thanks for your support!

[graphefruit]

Hey @ericferreira1992,
coming back to this case.
I've strangely encountered one strange new case:
In the first comment I've added that when I calculate the pixel-size for the height its working.
I've now encountered one specific situation where its not working:

The size is set and there are just 5 elements are rendered.
BUT I've encountered a realy huge lag when opening the screen, and found out, that all 240 entries (which are in the list) are initialized, even when there are just 5 visible / rendered:

on the other solutions on the other pages where its identically implemented, are just initializing the needed brews.

And now the funfact:

 <ag-virtual-scroll #openScrollAssociatedBrews [items]="associatedBrews" [height]="segmentScrollHeight" min-row-height="180">

If I change segmentScrollHeight to -> '100vh' -> its working.

Maybe this helps for some more debugging

[graphefruit]

I'd also have the TRACE, but its to big, but maybe the screenshot helps you aswell:

If needed I can pass you the trace as a link via email

[ericferreira1992]

@graphefruit, I'm running the beanconqueror application. How I can simule data, for exemple list the brews so I can take a look at the problem?

[graphefruit]

@ericferreira1992 do you run it on browser?

I can checkin you some sample data, but you'd also need to revert from 100vh to my calculcations e.g.

[ericferreira1992]

Yes, I'm using browser (G. Chrome). Ok, I'm pointing to the local ag-virtual-scroll source code to debug that situation.

[graphefruit]

I'll put in some beta-data right now :) give me about 10-20 minutes

[graphefruit]

Good evening @ericferreira1992
First of all: Thank you for your time and effort chasing this situation.
I've pushed to develop the sample-data.
Attached a short video what you need to do and to see this issue:

import_data.mov

I've also opened up one ticket, where I put the code change into it, to see where you can start to debug / change to see what is the differene: graphefruit/Beanconqueror#838

If you need anything else I'm happy to help!
Lars

[ericferreira1992]

Right! I ran the application here. I noticed the issue is because how your brews page is rendered at the application. You will never be able set height="100%'" or height="100vh" and get success.

• height="100%'": the parent elements aren't stretched (with height="100%" too) enough so ag-virtual-scroll can strech too.
• height="100vh": this might work, but always will render a ag-virtual-scroll with a big height (same height as the screen) causing external scrolls, so you will have two scrolls, one from do app (in a specific ion parent element) and another from ag-virtual-scroll component. In this case you will always need to set calculated height like height="calc(100vh - 66px)", which 66px would be the ion-segment rendered above.

I managed to make ag-virtual-scroll in this page with lastest version perfectly, calculating height as I said above. Try do this and tell me more.

[graphefruit]

Thank you for the digging::

You will never be able set height="100%'" or height="100vh" and get success.

Somehow the funny thing is: This worked very long

In this case you will always need to set calculated height like height="calc(100vh - 66px)", which 66px would be the ion-segment rendered above.

This is what I'm doing in the associcated brews, I'll update to the latest version (I just calculate this in a variable and set it)
graphefruit/Beanconqueror@4d2f01a

I'll try it this evening and give you feedback.

Thanks for your support!
Lars

[ericferreira1992]

@graphefruit, I made a mistake in my last comment. The calc is wrong, if you use 100vh you going to need to subtract the all elements heights which are taking up space, i.e. height="calc(100vh - ionSegment - tabBar - navBar)" . I also did a test stretching parents elements and I managed to use height="100%” in ag-virtual-scroll dynamically.

[graphefruit]

@graphefruit, I made a mistake in my last comment. The calc is wrong, if you use 100vh you going to need to subtract the all elements heights which are taking up space, i.e. height="calc(100vh - ionSegment - tabBar - navBar)" . I also did a test stretching parents elements and I managed to use height="100%” in ag-virtual-scroll dynamically.

This is what I'M doing in the associated-brew already

rivate retriggerScroll() {
    setTimeout(async () => {
      const el = this.associatedBrewsComponent.nativeElement;
      const scrollComponent: AgVirtualSrollComponent =
        this.openScrollAssociatedBrews;

      if (scrollComponent) {
        scrollComponent.el.style.height =
          el.offsetHeight - scrollComponent.el.offsetTop - 20 + 'px';

        this.segmentScrollHeight = scrollComponent.el.style.height;
        setTimeout(() => {
          /** If we wouldn't do it, and the tiles are collapsed, the next once just exist when the user starts scrolling**/
          const elScroll = scrollComponent.el;
          elScroll.dispatchEvent(new Event('scroll'));
        }, 15);
      }
    }, 150);
  }

And then I set the height element: [height]='segmentScrollHeight'

Btw: I need to do the event-scroll, because if i collapsed the items, sometimes they are not rendered to the bottom - maybe even a side-effect to this case here.

[graphefruit]

I've found another very strange situation.

Screen.Recording.2024-11-17.at.21.14.36.mov

When using the PX-Calculcation with a value, and switching from the tabs to another menu and coming back, the whole app freezes.

Intersting:
When I go from: [height]="segmentScrollHeight" to: [height]="'100%'" the app does not freeze anymore :O

[graphefruit]

Second one:
I've just updated to 1.9.2 - with height=100%, it doesn't work anymore at all, when I now add:

   const elScroll = scrollComponent.el;
   elScroll.dispatchEvent(new Event('scroll'));

As a trigger, it works.

This code I've found as a work around, because the tiles where sometimes not rendered when collapsed (and just 80px height, instead of 180) and therefore displaying much more then before