horizontal scrollbar not appearing

[developer94404]

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:

render: function() {
   return (
     <ReactScrollbar style={{width:"100%", height:"100%"}}>
         <div id="blah">
          // some text data here
         </div>
     </ReactScrollbar>
}

[developer94404]

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.

[usulpro]

Hi, @developer94404!
Did you set any width for <div id="blah">?

[developer94404]

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.

[usulpro]

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>

[developer94404]

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:
0. No width specified: scrollbar does not appear (original issue)
1. "2000px" (something much much bigger): the scrollbar appears and is correctly sized and scrolls correctly to the end
2. "100%": the scrollbar does not appear; cannot scroll
3. "101%": the scrollbar appears a tiny bit: can only scroll a tiny bit
4. "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.

[usulpro]

@developer94404
I check it! Indeed we have a bug when setting child width in %%!
@BosNaufal How do you think, can we have it fixed?

[BosNaufal]

Hey @usulpro, Sorry for my slow respose. But I think, I need reproduce to check it 😕

[aprilmintacpineda]

has this been fixed?

[armstrongl]

I think I may be running into this issue. Has it been fixed yet?