tbranyen / hyperlist

A performant virtual scrolling list utility capable of rendering millions of rows
Other
446 stars 44 forks source link

How the set a specific height for the list? #63

Closed Raffaele3D closed 4 years ago

Raffaele3D commented 4 years ago

Dear @tbranyen Tim,

I am struggling in setting the height of the list with a specific value.

To be more precise this is my divs configuration

<div id="listContainer" style="height: 300;"><div id="list" ></div></div>

and I would like to set the height of the div with id="list" to the height of the div with id="listContainer".

This is my script tag: how do have i to customize it? I ma trying to pass the height value as document.getElementById('listContainer').style.height what is wrong in that? Thanks in advance for your time.

<script>
  var container = document.getElementById('list');

  var config = {
    height:  document.getElementById('listContainer').style.height,
    itemHeight: 50,
    total: 100000,
    // Set to true to put into 'chat mode'.
    reverse: false,
    scrollerTagName: 'div',
    scrollContainer: document.getElementById('listContainer').style.height,
    overrideScrollPosition() {
      return (window.pageYOffset - (container.offsetTop - document.body.offsetTop)) || 0
    },
    generate(row) {
      var contact = '' +
          '<div id="contentToDisplay' + row +'"  onclick="javascript:changecolor(\'contentToDisplay' + row + '\')">' + content[row] + '</div>';
        var el = document.createElement("div");
      //el.innerHTML = "<p>ITEM " + content[row] + "</p>";
      el.innerHTML = contact;
      return el;
    }
  };

 var list = HyperList.create(container, config);

 container.classList.add("container");
</script>
tbranyen commented 4 years ago

Have you verified this:

height:  document.getElementById('listContainer').style.height,

In your devtools is setting a correct value? I believe the height property is the right thing to set here.

Raffaele3D commented 4 years ago

Have you verified this:

height:  document.getElementById('listContainer').style.height,

In your devtools is setting a correct value? I believe the height property is the right thing to set here.

Thanks for your reply: problem fixed as per your suggestion. Thanks a lot.

tbranyen commented 4 years ago

Awesome! Glad that fixed it 👍