1

I am trying to add the AutoSizer but keep getting height and width of 0px.

I add the AutoSizer like this:

    console.log("width: " + width, "height: " + height);

    return (
        <div style={{height: '300px'}}>
        <AutoSizer>
            {({ width, height }) => (
                <VirtualScroll
                    ref="VirtualScroll"
                    width={width}
                    height={height}
                    rowCount={months.length}
                    rowHeight={this.getMonthHeight}
                    estimatedRowSize={rowHeight * 5}
                    rowRenderer={this.renderMonth}
                    onScroll={onScroll}
                    scrollTop={this._initScrollTop}
                    className={classNames(style.root, {[style.scrolling]: isScrolling})}
                    style={{lineHeight: `${rowHeight}px`}}
                    overscanRowCount={overscanMonthCount}
                />
            )}
        </AutoSizer>
        </div>
    );

The resulting html:

<div class="Cal__Container__listWrapper">
  <div style="height: 300px; position: relative;">
    <div style="overflow: visible; height: 0px; width: 0px;">
      <div aria-label="grid" class="Grid VirtualScroll Cal__List__root" role="grid" tabindex="0" style="line-height: 40px; height: 300px; width: 400px; overflow-x: hidden; overflow-y: auto;">
        ...
      </div>
    </div>
  </div>

The logs give me:

width: 400 height: 200

If I edit the html of the 0px box in the browser and scroll my box, which by state change then is supposed increases its height, nothing happens. It stays on its manually modified size even if the new height value is being logged to the console.

1 Answer 1

1

The console.log statement is outside of your child function, so I'm not sure what it's logging (but it isn't the value passed in by AutoSizer).

It's also worth pointing out that your inner Grid is actually the correct size in your above snippet:

<div style="height: 300px; width: 400px;">

The wrapper <div> around your grid is intentionally sized with a width and height of 0 to enable AutoSizer to expand to fill its parent without stretching it. Its style is also set to overflow: visible to account for this.

So basically- things are working as expected from what you've shown. To get more help than that, I'll probably need you to supply a Plunker.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.