Horizontal overflow is being cut off

[jacobsmith]

Hello!

I'm trying to incorporate this library into an application I'm building and I'm running in to issues with content that is larger than the original viewport. Currently, I have it set to overflow-x: scroll but it is being overwritten (or in conflict with) overflow: auto. When I render the page and scroll to the right, I see:

However, when I remove the overflow: auto property with Chrome DevTools, it appears to render and react like I would expect, and I see no discernible difference in performance.

I'm not sure if this is an "Issue" with the library, an issue with how I have my CSS and HTML structured, or somewhere in between. Ideally, I'd like to be able to customize the overflow property with a prop. If that's something that would be beneficial elsewhere, I can gladly write up a PR for it!

[clauderic]

Hey @jacobsmith,

It's really hard for me to help you just based on a screenshot. Are you able to share a reproductible test case of this issue on codesandbox?

[jacobsmith]

Hi @clauderic - of course!

I haven't been able to reproduce 100% the issue that I see (with it being "cut off"), but I think I'm seeing the same fundamental behavior here:

https://codesandbox.io/s/nn4p7pnv94

When I load up the page and scroll all the way to the right, I see:

You can see that "programmer" in the third column is cut off and I'm not able to scroll to the right to see more. However, if I toggle off overflow: hidden on the second div that VirtualList has created, I am able to scroll to the right and see the content that was previously clipped (or hidden, rather).

Please let me know if you see the same thing, as well as if I'm just approaching the problem of content that is larger than the viewport width in the wrong way (would not surprise me! (: )

Thanks for any direction you can provide!

[nischitpra]

for horizontal scroll, the new items appear from the middle of the screen. Also if I don't wrap the item to be displayed with the <div style={style} key={index}> weird almost infinitely long scrolling happens (the items appear in multiple duplicates for vertical scrolling ). Also, in the documentation, width is said to be mandatory field but, I can go by without including it; but error shows up for height attribute. Am I doing something wrong here?

return (     
  <div>
    <p>Some more of the awesomeness!!
      <br/>
      lets hope this works
    </p>
    <VirtualList
      width='100%'
      height={170}
      itemCount={data.length}
      itemSize={250} 
      scrollDirection='horizontal'
      renderItem={({style, index}) =>
        <div style={style} key={index}>
        <NewsFeedBlock 
            imagePath={data[index].image} 
            label={data[index].label}
            name={data[index].name}/>
        </div>
      }
    />
  </div>
)

(the scroll bar looks like its vibrating. I am able to move well past the last item here.)

<VirtualList
  width='100%'
  height={170}
  itemCount={data.length}
  itemSize={200} 
  scrollDirection='vertical'
  renderItem={({index, style}) =>
    <NewsFeedBlock 
        style={style} key={index}
        imagePath={data[index].image} 
        label={data[index].label}
        name={data[index].name}/>
  }
/>

this is my render function. please help >.<

[DimitarNestorov]

@nischitpra You're not passing down style inside that NewsFeedBlock.

class NewsFeedBlock extends Component{
    render(){
        return <div style={this.props.style}>
            // ...
        </div>;
    }
}

[konradd93]

Hi @clauderic,

I have a similar problem to @jacobsmith:

When I change overflow: hidden to overflow: unset or toggle off:

then:

Can I change the overflow attribute from the outside?

[ghost]

@nischitpra did you solve your vibrating problem? i have the same problem in a list with a nested lists with collapsable data in there pls help :c

[baimMN]

same here