Open developer94404 opened 7 years ago
When I change the style[width] from "100%" to "200px", it does shorten the horizontal display of my data. But the horizontal scroll bar does not appear.
Hi, @developer94404!
Did you set any width for <div id="blah">
?
Hi @UsulPro -- thank you for quick reply. I did not -- however, I just tried by adding style={width: "100%"}, and the horizontal scroll does not appear still. I also tried width = 50px, 80% just for experiment (still no appear).
If it helps (I don't think it does), my widget is being rendered into golden layout container.
but is your content inside scrollbar has width bigger than scrollbar area? It's a reason for horisontal scroll appearing. Usualy div
with a text fits for 100% of a parent width.
Could you try:
<ReactScrollbar style={{width: 200, height:"100%"}}>
<div id="blah" style={{width: 400}}>
// some text data here
</div>
</ReactScrollbar>
Hi, thanks for reply. I just tried it out:
First, the setting I use for ReactScrollBar:
ReactScrollBar style[width] = "100%":
Second, the setting I use for inside div:
Case:
- No width specified: scrollbar does not appear (original issue)
- "2000px" (something much much bigger): the scrollbar appears and is correctly sized and scrolls correctly to the end
- "100%": the scrollbar does not appear; cannot scroll
- "101%": the scrollbar appears a tiny bit: can only scroll a tiny bit
- "120%": the scrollbar appears but is still not sized properly and does not "look" correct when scrolling (end-position & ratio-when-scrolling is wrong)
Perhaps the difference between this and your test cases, is that I am rendering the data into the inside div based on ajax call; so the data is variable-length based on use-case and may change on any specific React render() call.
Thanks!
Edit: I also tried above cases with inner div having style[overflow] = 'hidden'
; results are completely the same as above.
@developer94404 I check it! Indeed we have a bug when setting child width in %%! @BosNaufal How do you think, can we have it fixed?
Hey @UsulPro, Sorry for my slow respose. But I think, I need reproduce to check it :confused:
has this been fixed?
I think I may be running into this issue. Has it been fixed yet?
Hi, thanks for your excellent component. I dropped it in and it was instantaneously working with vertical scroll.
However, I am not able to get horizontal scroll to appear. Do you have any tips?
My data is overflowing in horizontal direction; if use native css scroll enable, the browser horizontal scrollbar does show up.
Thanks for any help!
I am using your component like this: