Open jacobsmith opened 6 years ago
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?
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!
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 >.<
@nischitpra You're not passing down style inside that NewsFeedBlock.
class NewsFeedBlock extends Component{
render(){
return <div style={this.props.style}>
// ...
</div>;
}
}
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?
@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
same here
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!