Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid display element height #213

Open
conraddamon opened this issue Aug 6, 2018 · 2 comments
Open

Grid display element height #213

conraddamon opened this issue Aug 6, 2018 · 2 comments

Comments

@conraddamon
Copy link

I just ran into an interesting issue with grid layout. When effectiveHeight() is called in order to determine whether more data needs to be loaded, it calculates the bottom position by adding up the heights of each element. Unfortunately, that happens before Angular has rendered the item, and the pre-render height can differ from the rendered height if a table with sized columns is being used.

For example, let's say the rendered item is just a letter, so the column width is something like 12px. If the Angular code is something like {{pickSomeRandomLetter()}}, it will blow out the table cell vertically in its pre-render form, and outerHeight() will return something way too large, throwing all the calculations off. What I ended up seeing is that data stopped loading early, so the table didn't even fill the container.

The right way to fix this would be to have the height measurement done after Angular has rendered the items, but I have no idea if that's even possible. Any other solution is likely to be pretty hacky.

Any ideas?

@dhilt
Copy link
Member

dhilt commented Aug 14, 2018

@conraddamon I tried to play with grid-layout demos to catch the moment when effectiveHeight() might be called while the items were not compiled. And I have never seen the following condition satisfied within the effectiveHeight method:

elements.some(item => item.element[0].innerHTML.indexOf('{') > 0)

It means that each element's template had been compiled prior to the moment when the effectiveHeight method was called. Also I tried big template trick... I didn't see any gaps.

Maybe I'm doing something wrong, could you help me to reproduce the issue and provide more detailed steps?

@conraddamon
Copy link
Author

It turns out that the fix was pretty trivial: use ng-bind rather than directly including the Angular template code. For example, change

<td ui-scroll-td><div>{{logline.timestamp | date:'MMM d'}}</div></td>

to

<td ui-scroll-td><div ng-bind="logline.timestamp | date:'MMM d'}"></div></td>

I was able to repro the issue by undoing that change. This time I didn't see it on initial load, but I did see it when scrolling up to force a data load and another call to effectiveHeight(). There's a screenshot here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants