mobify / pinny

A mobile-first content fly-in UI plugin
MIT License
23 stars 4 forks source link

Look into adding CSS fix for pinny content not being scrollable #91

Open donnielrt opened 8 years ago

donnielrt commented 8 years ago

We've had a few issues with pinny content not being scrollable. The fix according to @vmarta has been to add the following CSS:

// Force scrollable // - // // Forces the pinny content to be scrollable at all times. This works around // an issue where scrollpanes within a pinny will not be scrollable if the // content does not overflow the pinny wrapper. // // 1. Space that forces the pinny content to scroll. // 2. Force the space below the bottom of the visble area.

.c-pinny.c—force-scroll .c-pinny__content { &::after { content: ’’;

position: absolute; bottom: -20px; // 2 left: 0; width: 100%; height: 20px; // 1 pointer-events: none; } }

We need to look into adding this into the default CSS.

highruned commented 8 years ago

@jeffkamo and I can totally confirm this is true. We also discovered it that long 2am bundle night: https://github.com/mobify/btr-adaptivejs/commit/84732c4d33ffa85c49b9f88f567ada4900ef04d9

jeffkamo commented 8 years ago

Yuuup, we used this "fix" way back on BTR to accomplish the same thing.

Ah, as you can see in Eric's link above!

donnielrt commented 8 years ago

I'm trying to modify the pinny example to see what the issue this CSS attempts to fix is. Is this the kind of situation it is meant to deal with?

Edit: namely, when there is too little content in the pinny content.

donnielrt commented 8 years ago

@ericmuyser @vmarta @jeffkamo ^^

jeffkamo commented 8 years ago

That is correct

jeffkamo commented 8 years ago

Or, even more specifically, when there isn't enough content present to make the pinny container scroll.

donnielrt commented 8 years ago

OK, I can't seem to reproduce the issue/fix in the example code. Can I borrow you when you have a minute?