react-gemini-scrollbar icon indicating copy to clipboard operation
react-gemini-scrollbar copied to clipboard

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

Open FranzPoize opened this issue 8 years ago • 7 comments

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 :)

FranzPoize avatar Jul 29 '15 13:07 FranzPoize

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.

dacostafilipe avatar Oct 09 '15 07:10 dacostafilipe

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!

cjmoran avatar Nov 20 '15 19:11 cjmoran

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.

noeldelgado avatar Dec 10 '15 11:12 noeldelgado

+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 avatar Mar 27 '16 09:03 adrianmcli

@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:

  • Chrome 49.0.2623.87 / Mac OSX 10.11

adrianmcli avatar Mar 27 '16 09:03 adrianmcli

+1

upq avatar Jun 01 '16 22:06 upq

+1 in 2017

neolectron avatar Aug 24 '17 10:08 neolectron