-
Notifications
You must be signed in to change notification settings - Fork 165
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Horizontal overflow is being cut off #24
Comments
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 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 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 class NewsFeedBlock extends Component{
render(){
return <div style={this.props.style}>
// ...
</div>;
}
} |
Hi @clauderic, I have a similar problem to @jacobsmith: When I change Can I change the |
@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!The text was updated successfully, but these errors were encountered: