Single cell buffer element still interfering with the normal table layout

[ajayvikas]

Just updated to version 0.4.3

The single cell on table buffer is still causing issues. It is still interfering with the column widths. You can see in the attached picture.

(look at the top very top border. At the top of the first cell, it looks like a thick border because of the buffer cell and rest of the border look like a double border, top is coming from the preceding div.)

I was wondering why don't you append the buffer element before and after the table. that way the table contents would remain clean and buffer won't interfere with the table layout.

[martingust]

@ppN2 That might be a better way to handle the buffer element in tables. Will look into this.

[lsesol]

Could this be mitigated by simply setting a colspan on the buffer cell?

It's not technically correct, but all browsers I've come across accept an arbitrarily large colspan to mean all cols. However since the first item is rendered in order to get height should mean the actual column count is accessible.

[ajayvikas]

@lsesol my experience is that the table layouts are already very tricky. Injecting cells even with colspan makes it even more difficult. I still believe the best strategy to introduce buffer elements outside of the table.

[ajayvikas]

Hello @martingust

Would it be possible for you to predict when you are gonna work on this issue?

[AStoker]

Might just be that some nifty CSS could fix the issue. For your problem right now, you could probably address it with CSS.

[ajayvikas]

@AStoker this is not an CSS issue. Once you have a single cell in the first row, it immediately start to interfere with the layout. The table does not respect the column widths anymore. Also with the CSS I have tried everything but nothing seems to fix this problem. Also I have just tried on Chrome. Who know what other problems are lurking with other browsers.

[martingust]

@ppN2 Sorry for the delay, other stuff have been prioritized. My plan is to start knock out issues on this repo within a week or so.

[martingust]

@ppN2 Ok, I've got this working by moving the buffer element outside of the table. Will need to do some more testing and refactoring before I'll get this in.

[ajayvikas]

Thank you very much @martingust. I really appreciate it.

[martingust]

@ppN2 Hopefully a fix is in mater, will go out in next release.

[ajayvikas]

hi @martingust. I tried the latest release and it immediately busted. I tracked the error to this line.
Basically for some reason the null value is being passed in the getElementDistanceToTopOfDocument function. To make it work I changed the code as follows

var box = element ? element.getBoundingClientRect() : {top: 0};

I am not sure what was causing null to pass into this method but if you give me some pointer i can try to track it down.

Anyway after making this change it worked like a charm. I can see that the buffer elements are before and after the table, which is fantastic. Thank you very much!!!

I also noticed couple of things.

1. getElementDistanceToTopOfDocument is being called repeatedly very quickly (every second or so). Seems like some kind of dirty checking is going on, which we would like to avoid at any cost (causes drain on the battery of the device).
2. While playing with the table, I saw the suddenly the whole table went blank. I don't remember the exact sequence but I did some browser resizing, open/close dev tools. I can't reproduce this behavior any more but if you hear from somebody else as well, it might be worth investigating.

[martingust]

@ppN2 Your change might be what's needed, I'll take a look when I get back from vacation.

1. Yes, getElementDistanceToTopOfDocument is called every 500 ms, it is calculating the the distance from top of the list to top of document, if this changes it needs to get the new distance. There might be a better way I don't know of the get notified when this distance changes without, any ideas are welcome.
2. Most likely due to resize of window, issue is tracked here Recalculate Items Shown on Resize #69

[ajayvikas]

@martingust I would assume scroll event would take care of it but I can't help but thinking that you might have already tried it.

Recently I had a look at the virtual scroll from kendo guys. The demo is available at this link. I feel there scroll feels snappy and well built. I compared with aurelia-virtualization demo. The difference in the performance was too big too ignore. In aurelia, if you scroll up or down quickly, you see a blank screen and then the items are rendered. If you add too many items lets say 500000 items, the entire ui becomes unresponsive or the list becomes blank.

I am sorry I am not being too helpful in suggesting a solution but maybe you guys can take inspiration from other implementations like kendo (or many others on the internet). I do appreciate all the good work you guys are doing. I really do.