KingSora / KingSora.github.io

3 stars 4 forks source link

z-index issue #3

Open Racquetballer opened 5 years ago

Racquetballer commented 5 years ago

Using Overlay Scrollbars 1.6.1 I'm very happy with your scroll bars! I have recently discovered an issue I can't figure out.

I'm trying to display a popup over the scrollbars and just can't figure it out. I set the z-index of the popup very high and still the scroll bars appear on top of my popup. Can you give any assistance to fix my issue? Thanks! Shawn image

KingSora commented 5 years ago

Good day!

Would you mind to provide a small demo for me, or even send me the link to your page directly? Because its kinda strange, your popup should be completely cropped inside of the scrolling area, but it isn't. I'm sure there are ways to fix your issue though.

Racquetballer commented 5 years ago

Here is a link to my development page that is showing the behaviour.

https://dev.perfectcamp.com/joshua-tree-national-park/hidden-valley

[image: image.png]

I'm using the latest Chrome on Windows 10 and scrollbars 1.6.1

Please click on the 3 bullets icon (in red area) so the popup is visible and make sure the height of your browser window is small to force the scrollbars.

If we can get this fixed I'm willing to send you a donation. Thanks!

Shawn Jackson 970-294-2121

On Wed, Jan 30, 2019 at 1:55 AM Rene Haas notifications@github.com wrote:

Good day!

Would you mind to provide a small demo for me, or even send me the link to your page directly? Because its kinda strange, your popup should be completely cropped inside of the scrolling area, but it isn't. I'm sure there are ways to fix your issue though.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/KingSora/KingSora.github.io/issues/3#issuecomment-458863268, or mute the thread https://github.com/notifications/unsubscribe-auth/ACOqIwE9NaaeQY65Lqr_imviSejXHKzOks5vIV3_gaJpZM4aZk4a .

KingSora commented 5 years ago

It should be fixed with this CSS rule:

#leftCol > .os-padding {
    z-index: 2;
}

I've found some other "issues" though, would you mind helping me to improve the plugin and use the non-minified version of the plugin, so that I can figure out how to handle them properly in the future?

Racquetballer commented 5 years ago

Thanks! I have switched the css and js over to standard versions. I'm now working on getting the scroll bar to appear over my slider/video.

Regards,

Shawn Jackson 970-294-2121

On Wed, Jan 30, 2019 at 2:21 PM Rene Haas notifications@github.com wrote:

It should be fixed with this CSS rule:

leftCol > .os-padding {

z-index: 2;

}

I've found some other "issues" though, would you mind helping me to improve the plugin and use the non-minified version of the plugin, so that I can figure out how to handle them properly in the future?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/KingSora/KingSora.github.io/issues/3#issuecomment-459113902, or mute the thread https://github.com/notifications/unsubscribe-auth/ACOqI1W2FAgJ1NkZwQiY3B6KOk9awiJoks5vIgzXgaJpZM4aZk4a .

KingSora commented 5 years ago

Argh, you're right, I haven't noticed that my fix is causing a new issue.

There is a way to fix this problem properly, but unfortunately it can't be done only with CSS. Are you able to control the menuBox element (the popup which is appearing if you click on the 3 dots)? If it would be added on a other place in the DOM, this issue would be solved. - This is also the only way which I can think of to solve it properly.

Racquetballer commented 5 years ago

Did you get my $50 donation? Just curious..

Yes I can control that popup from anywhere. Is it causing the scrollbars to not display on top of my slider/video? I also have a popup for the number of likes.

Thanks,

Shawn Jackson 970-294-2121

On Thu, Jan 31, 2019 at 5:10 AM Rene Haas notifications@github.com wrote:

Argh, you're right, I haven't noticed that my fix is causing a new issue.

There is a way to fix this problem properly, but unfortunately it can't be done only with CSS. Are you able to control the menuBox element (the popup which is appearing if you click on the 3 dots)? If it would be added on a other place in the DOM, this issue would be solved. - This is also the only way which I can think of to solve it properly.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/KingSora/KingSora.github.io/issues/3#issuecomment-459321810, or mute the thread https://github.com/notifications/unsubscribe-auth/ACOqI-WnLWSBkO4KdVQw9bQvdtqDIXSyks5vIt1JgaJpZM4aZk4a .

KingSora commented 5 years ago

Yes I got your donation. Thank you very much... I REALLY appreciate it.

If you can control where the popup gets added, try to add the popup to the end of the body element instead of where you're adding it now. This should fix the issue without the need of the CSS rule I wrote above.

In case you need more help or a example, let me know. We could chat in Skype / Discord and I could even help you directly via TeamViewer if you want.