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

Tables not rendering correctly #84

Closed
hmarcelodn opened this Issue Sep 16, 2016 · 11 comments

Comments

Projects
None yet
6 participants
@hmarcelodn
Copy link

hmarcelodn commented Sep 16, 2016

I'm submitting a bug report

Library Version: 1.0.0-beta.3.0.1
Please tell us about your environment:

Operating System: Windows Server

Node Version: 5.0.0

NPM Version: 3.5.2

JSPM: 0.16.35

Browser: all

Language: ECMA6

Current behavior:

I created a basic table with hardcoded content. I specified the height on table and repeater item.

It works when scrolling down but its breaking when scrolling up.

<table id="testVirtual" class="virtual-repeater-wrapper"> <tr virtual-repeat.for="item of [1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4]" class="virtual-repeated-item"> <td>Test1</td> </tr> </table>

Demo: http://screencast.com/t/XQgHkORPjpbo

Expected/desired behavior:

Same behavior works when using divs instead of tables.

@AStoker

This comment has been minimized.

Copy link
Member

AStoker commented Sep 16, 2016

Try wrapping the table itself in a wrapper with a set size and an overflow property.
What version of the repeater are you using?
Can you post your surrounding code (instead of it being in a screencast)?
And could you also format your question according to the issue template?

@hmarcelodn

This comment has been minimized.

Copy link
Author

hmarcelodn commented Sep 16, 2016

@AStoker Updated. I will take a look to the suggestion.

@hmarcelodn

This comment has been minimized.

Copy link
Author

hmarcelodn commented Sep 16, 2016

@AStoker it works if i wrapp the table with a div like you said. So is not there a way to just scroll the tbody?

@AStoker

This comment has been minimized.

Copy link
Member

AStoker commented Sep 16, 2016

It's related to this: #46 (comment)
I don't have an answer right now unfortunately :(
@martingust, do you have an answer for the behavior of those buffer elements in tables?
In the mean time @hmarcelodn, is that good enough to get you going at least?

@hmarcelodn

This comment has been minimized.

Copy link
Author

hmarcelodn commented Sep 16, 2016

@AStoker so far I can go with that I believe. I will find some kind of work around for headers. Thanks.

@AStoker

This comment has been minimized.

Copy link
Member

AStoker commented Sep 16, 2016

No problem. I'd like to leave this issue open as a reference to fix the behavior with tables, since it seems a bit strange to me.

@hmarcelodn

This comment has been minimized.

Copy link
Author

hmarcelodn commented Sep 16, 2016

@martingust @AStoker please update this if you got some information regarding that improvement.

Thanks a lot for helping.

@mateuszdw

This comment has been minimized.

Copy link

mateuszdw commented Dec 8, 2016

Any news on that bug? Simple table with bootstrap styling throw getBoundingClientRect error. I'm using aurelia-ui-virtualization@1.0.0-beta.3.0.2. Wrapping table like this:

<div style="overflow: scroll; height: 90vh">
  <table class="table">
    <tr virtual-repeat.for="file of files">
      <td>${file.no}</td>
    </tr>
  </table>
</div>

Still not fix issue for me.

@mateuszdw

This comment has been minimized.

Copy link

mateuszdw commented Dec 10, 2016

For those who really like to use current version of virtual-repeat with tables, try bootstrap grid layout:

<div style="overflow: scroll; height: 90vh">
    <div virtual-repeat.for="file of files">
      <div class="row" style="height:40px;">
        <div class="col-xs-6">${file.no}</div>
        <div class="col-xs-6">${file.name}</div>
      </div>
    </div>
</div>

What else cost me o lot of time to figure out was oneTime binding in virtual-repeat. It's obviouse you can't use ${file.no & oneTime}. Is worth mentioning in docs you can't use oneTime in virtual-repeat block.
By the way GREAT component!

@nisargrthakkar

This comment has been minimized.

Copy link

nisargrthakkar commented Sep 15, 2017

Is there any solution for this bug? Got table structure error `getBoundingClientRect '

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Apr 19, 2018

A fix is at #131, if anyone still using virtual table, please give it a check.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment