0

I am trying to use this tutorial to allow efficient scrolling on a matrix widget I wrote. However, it uses absolute positioning on the infinite scrolling nodes it creates. My nodes are table rows and columns. That takes all of the cells out of table flow. Is there a way, to keep absolutely positioned table cells in flow?

I do know it is possible to absolutely position a div and keep it in flow with another div wrapped around it using relative positioning on the outer div. Something like:

<div style="position:relative"><div style="position:absolute;top:0;left:0"></div></div>

However, that will not work in this case due to the outer html being a table body with a header and the inner html being table rows. Is there any way to apply relative positioning to a part of a table to force absolutely positioned table cells to stay within the table and keep their alignment with the table header?

I have tried applying relative positioning on various parts of the table surrounding the absolutely positioned rows like:

<table border="1">
  <thead><tr><th>header</th><th>another header</th></tr></thead>
    <tbody style="position:relative">
       
       <tr style="position:absolute">
          <td><input type="checkbox"/></td>
          <td><input type="checkbox"/></td>
       </tr>
       <tr style="position:absolute">
          <td><input type="checkbox"/></td>
          <td><input type="checkbox"/></td>
       </tr>
    </tbody>
</table>

Is it possible to modify the above snippet so the cells stay in flow with the thead section and the rest of the table? The same relative positioning trick that works for divs, does not seem to work for table content.

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
Dean Peterson
  • 467
  • 6
  • 15
  • Downvoters, rather than just downvote can you tell me why the question isn't a good question so I can improve it? – Dean Peterson May 06 '17 at 14:36
  • 2
    Hi, I haven't downvoted, but as far as your question is concerned, in order to let people answer your questions, you should first show what you have tried so far. An HTML output, and some Css would be nice. – Rüzgar May 06 '17 at 14:46
  • Thanks for the reply! I certainly have tried and will add that. – Dean Peterson May 06 '17 at 14:52
  • I have updated the question and included a runnable snippet. – Dean Peterson May 06 '17 at 15:21
  • 1
    Since i do not have any opinion with the rest of your code, and the tutorial that you're following, I can just assume. Is this `` a must markup? What i mean is, do you have to use absolute positioning? If you don't, you can still use the css : `tr {position: relative !important;}` and align your table. – Rüzgar May 06 '17 at 19:00
  • I believe it is. I included that html snippet as an example. The absolute positioning is actually set in javascript on the tr node programmatically in the library I am using: https://github.com/GoogleChrome/ui-element-samples/blob/gh-pages/infinite-scroller/scripts/infinite-scroll.js. My content source consists of tr nodes. Those nodes are processed by the infinite-scroll.js. The output is absolutely positioned table rows like what is in the snippet. I tried removing the absolute positioning in that library but that seems to break many of the other calculations. – Dean Peterson May 06 '17 at 19:29
  • I may need to change my implementation entirely and use one of the suggestions here: http://stackoverflow.com/questions/12613113/performance-with-infinite-scroll-or-a-lot-of-dom-elements. In one of the comments they recommend using clusterize.js. That library uses a separate table for the header information and javascript to calculate and sync with the scrollable content. – Dean Peterson May 06 '17 at 19:32

2 Answers2

1

I think clusterize.js may offer you a solution to your problem, as it handles tables very well.

tmuecksch
  • 6,222
  • 6
  • 40
  • 61
0

I think this is what you want. (If you are using Polymer's infinite iron-list)

<style>
    :host {
        display: block
    }
    #scrollzone {
        display:flex;
        flex-direction:column;
        overflow-y:scroll;
    }
    .header {
        background-color:red;
        height:22px;
        width:100%;
        position:sticky;
        top:0;
    }
    .footer {
        background-color:blue;
        height:22px;
        width:100%;
        position:sticky;
        bottom:0;
    }
    iron-list {
        flex: 1 1 auto;
    }
</style>
<div id="scrollzone">
    <div class="header">header</div>
    <iron-list items="{{items}}" scroll-target="scrollzone">
        <template>
            <div>{{item.name}}</div>
        </template>
    </iron-list>
    <div class="footer">footer</div>
</div>
Hugues LAMA
  • 1