This repository has been archived by the owner. It is now read-only.

Scrollbar not showing when chidren's height set in % #57

Closed
sylvainjule opened this Issue Sep 1, 2015 · 11 comments

Comments

Projects
None yet
3 participants
@sylvainjule
Copy link

sylvainjule commented Sep 1, 2015

Hi,
I'm having some hard time trying to make the bar appear when used inside a list,
with its li children's height set as 33.33333% (and 4+ li in a column).
The overflow isn't detected, the scrollbar doesn't show.
When set in px, no problem at all.

Here is a fiddle of the issue :
http://jsfiddle.net/sylvainjule/zwL0pLng/4/

I currently get it working by previously formatting the height with jQuery :
http://jsfiddle.net/sylvainjule/n3h01tvx/46/

But wonder if the issue has already shown up / there is a cleaner fix ?

@sylvainjule sylvainjule changed the title Scrollbar not showing when chidren height set in % Scrollbar not showing when chidren's height set in % Sep 1, 2015

@gromo

This comment has been minimized.

Copy link
Owner

gromo commented Sep 2, 2015

Hi @sylvainjule

This behavior is really strange and unexpected for me. I mark this as bug and will try to inspect and fix problem in next few days.

@gromo gromo added the bug label Sep 2, 2015

@gromo

This comment has been minimized.

Copy link
Owner

gromo commented Sep 5, 2015

@sylvainjule

Hi, sorry for delay. Unfortunately I am extremely busy these days and cannot look at this issue now, but I don't forget about it.

@sylvainjule

This comment has been minimized.

Copy link

sylvainjule commented Sep 11, 2015

No problem at all ! Thanks for looking into it.

@gromo

This comment has been minimized.

Copy link
Owner

gromo commented Sep 28, 2015

I have reviewed your example. I'm afraid I cannot fix it. Unfortunately (I don't know why), children's height in % does not work if parent's height is set to auto (regardless of min-height/max-height values/actual element height), but I need height:auto because of negative margins that hides native browser scrollbars. So your hack/fix is the best possible option for now.

@gromo gromo added the wontfix label Sep 29, 2015

@arturparkhisenko

This comment has been minimized.

Copy link
Contributor

arturparkhisenko commented Nov 17, 2015

@gromo i think same problem with flexbox layouts.. can you fix it?
related to % height malihu/malihu-custom-scrollbar-plugin#68

@gromo

This comment has been minimized.

Copy link
Owner

gromo commented Nov 17, 2015

@arturparkhisenko I will look at it in next few days

@gromo

This comment has been minimized.

Copy link
Owner

gromo commented Nov 18, 2015

@arturparkhisenko

jQuery scrollbar was easily applied to flexbox container. example on jsFiddle.net: http://jsfiddle.net/6Yrkr/19/

@arturparkhisenko

This comment has been minimized.

Copy link
Contributor

arturparkhisenko commented Dec 21, 2015

@gromo thanks for check, maybe its just rare case.
example: http://jsbin.com/guqivezejo/9/edit?html,output
before applying: all working fine and like it should be! (you can comment script and see that);
after applying plugin: scrollbar dissapears and padding of applied element is 0.

@gromo

This comment has been minimized.

Copy link
Owner

gromo commented Dec 21, 2015

@arturparkhisenko What about CSS class for scrollbar?

@arturparkhisenko

This comment has been minimized.

Copy link
Contributor

arturparkhisenko commented Dec 21, 2015

@gromo yep, my bad, forgot it 💡 Thanks!
But i found another problem with a paddings: i cant scroll to the end, and also i cant see the content that behind a paddings, example: https://jsfiddle.net/Lfohe21a/
I can fix it only by adding important here: box-sizing: border-box !important;
In default stylesheet i found that:
.scroll-wrapper > .scroll-content { box-sizing: content-box !important; }

@arturparkhisenko

This comment has been minimized.

Copy link
Contributor

arturparkhisenko commented Dec 25, 2015

@gromo Спасибо за OSS! 👍 Merry Christmas, и с наступающим Новым Годом! 🎅🎄🎉🏂🎿🎁
Потому что: https://twitter.com/cssunderhood/status/680383777516969985

@gromo gromo closed this Jun 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.