search

noeldelgado / react-gemini-scrollbar

:last_quarter_moon: React component for custom overlay-scrollbars with native scrolling mechanism.
MIT License
133 stars 24 forks source link

There should be some option to make gm-scrollbar-container position: absolute #7

Open FranzPoize opened 9 years ago

FranzPoize commented 9 years ago

Hi.

When the parent of gm-scrollbar-container is a flexbox, gm-scrollbar-container need to be positioned absolutely for the height: 100% to have an effect.

see: http://stackoverflow.com/questions/15381172/css-flexbox-child-height-100

There is some easy workarounds just saying that it would be cool to be able to include it in :)

dacostafilipe commented 9 years ago

This also helped me on an other problem where the scrollbar would be displayed twice (browser and gm scroller).

+1 for some kind of prop to activate this.

cjmoran commented 9 years ago

Would either of you mind explaining how to work around that double-scrollbar issue? I'm using this library within a flexbox container (variable width but fixed height) and I can't figure out how to get it behaving properly:

Double scrollbar screenshot

Thanks!

noeldelgado commented 8 years ago

Hi, can someone provide a small test case please (http://jsfiddle.net, http://jsbin.com/, http://codepen.io/, etc). Or if not possible, provide a link to a live version of your application?

Also specify your browser version and operating system (i.e. Chrome 23.0.1271.95, Windows 7).

I've been trying to replicate it but no luck so far.

Thank you.

adrianmcli commented 8 years ago

+1 I had to deal with this as well. It's a pretty simple fix:

  1. Set parent as position: relative
  2. Set gm-scrollbar-container as position: absolute

Right now, I'm overriding the style in a CSS file, but it would really be nice to have a prop to set instead. I'll see about writing some example code that'll be easy for you to test @noeldelgado.

adrianmcli commented 8 years ago

@noeldelgado I've made a pen to illustrate the issue: http://codepen.io/anon/pen/pywpwW

When you first load the pen, you'll see that the yellow div inner-block does not extend to the full height of its parent flex-block even though its height is set to 100%. However, if you un-comment the two position statements in the CSS, you'll see that the issue is fixed.

This is what I've been doing throughout my app when using Gemini Scrollbar.

Tested on:

upq commented 8 years ago

+1

neolectron commented 7 years ago

+1 in 2017