3

My configuration goes as follows:

// Calling it
<div style={{ width: 1000, height: 800 }}>
  <MyComponent />
</div>

// MyComponent.js
<InfiniteLoader { ...itsProps }>
  {({ onRowsRendered }) => (

    <AutoSizer>
      {({ width, height }) => (

      <Table
        width={ width }
        width={ height }
        ...

The problem is that this is what is being rendered:

<div style="overflow: visible; height: 0px; width: 0px;">
  <div class="ReactVirtualized__Table" role="grid">
    ...

So nothing is seen in the screen.

Maybe I misunderstood Autosizer usage, so I set it up to adjust itself to the parent's width/height.

What am I missing?

1
  • can you provide more from output html
    – Serguzest
    Commented Mar 9, 2018 at 23:16

1 Answer 1

8

The height: 0 style in the snippet of HTML you shared isn't actually a problem, because of the overflow: visible style. This is the way AutoSizer is meant to work.

I suggest you read the "Using AutoSizer" docs page. I suspect your problem is similar to one of the common issues mentioned there:

AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)

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.