The problem is I cannot get dropdown menu to show on top of ng-grid. I've even tried manually setting the z-index property on every element via FireBug but still cannot get it to work.
I'm hoping someone with similar experience can help..
Here's Plunker sample
It kinda works if you set:
.ngViewport {
overflow:visible;
}
in style.css. But it does not look very nice. May be take this forked plunker as a base for further experiments.
Related
I tried for a few hours now to figure out why my sub menu disappear when I hover over the parent menu.
Live demo: http://topforexbroker.net/kafi/
I could possibly remove the margin-top from my sub-menu class and easy fix but then my border 1px at the top of the sub menu goes away :)
Any suggestions or tips would be greatly appreciated.
Demonstration of the issue: https://gyazo.com/5387a96e4c86f4fb1cbef9aa8715ed71
Thanks!
I finally managed to solve the problem, as I said in my first post this margin.. I changed some of them on the sub-menu class and the primary-menu and now it works.
There is no thing wrong with your CSS. I usually add a timeout like 200ms before hide sub-menu to avoid this situation.
This functionality is related to your jQuery script and is not a CSS issue. Im assuming there is some sort of event listener probably
.mouseleave()
which has a function to hide your submenu. Change that and this behavior will go away.
https://api.jquery.com/mouseleave/
I'm clueless how to get the scrollbar display below the active box - list item.
After searching I have found that the z-index should work on element positioned other than static. But still I'm still unable to produce the desired effect.
This is just one part of my problem, I believe if I understand the solution to this one, I can also fix another similar problem.
Somehow the active box is displayed on top of the scrollbar, but not the scrollbar's handle.
Here's the JsFiddle. Should be quite easy to notice my problem.
The desired effect is that the scrollbar and everything related to it (handle) is displayed below the active(longer, red) box.
Sorry, don't really see a way to accompany this problem with code inside the post or how to make the JsFiddle with less code.
I think you'll have to apply a z-index to the .scrollbar element itself, rather than its child .scroller. Add these styles to your definition of it:
.scrollbar {
z-index:-1;
position:relative;
}
And you should get (what I hope is) your desired behaviour. Here's an updated JSFiddle for you to see what this achieves. If this isn't what you were looking for, feel free to let me know and I'll be happy to help further. Good luck!
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
I am not sure whether i am missing something here, but it seems i cannot put an imagemap above everything else (in terms of z-index). I tried varying the order of the HTML element definition, i tried using CSS to define proper z-index values, but none of these approaches works.
Has anyone encountered similar issues?
(Tested in FF 8.0.1)
jsFiddle here
You need to add position:absolute; to the map too:
http://jsfiddle.net/sBSHn/1/
I would suggest setting #testDiv to display:none
Then whenever the event occurs that you want to trigger it appearing or disappearing simply call:
$('#testDiv').toggle();
site in question: http://ecogroovellc.com
When looking at the 2nd child menu drop-down (Portfolio>Music), it appears properly in FF and Safari, but not in IE8, where it is hidden within the 1st child drop-down. Any solution ?
Thanks!
I know it's because of the filter (providing opacity) in IE - it causes an overflow: hidden-esque effect.
I attempted to precisely locate it, but there's a lot of CSS/JavaScript to look through and I became disheartened.
What you need to do is remove the relevant filter rule when the fade transition is complete in your JavaScript.
If you set the UL in question (the one with audio and videos) to position:relative, it seems to fix it in ie8, but it screws it up in FF.
I had the same issue. I tried multiple variations, in the end I added filter:none !important; to my css rule on the containing element and that is what worked for me.
if you're trying to compensate for issues on IE8 you should always target it conditionally (add conditional class to HTML then write css targeting .ie8 specifically)
there literally isn't any way to write code that works for everything all at once...