I have a problem with ie7 z-index behaviour.
Opening this page with ie7, the dropdown menu (some sections have it, some other doesn't) falls behind the slider.
I tried to solve using z-index and position of the parent element, but couldn't fix the thing.
Do you have any idea how to make the dropdown menu stay in front of the slider?
Thanks.
Try wrapping the nav menu with an additional container, then give to the wrapping div a bigger z-index than the z-index used in the nav menu.
This is a known issue of IE7 reported HERE on 2006.
There's an article that shows the workaround that can be used to solve the problem.
Take a look HERE.
As an example imagine you have a div with id="menu" for your navigation menu, you should do something like this:
<div id="wrapper" style="position:relative; z-index: 1000;">
<div id="menu" style="position:absolute; z-index: 999;"></div>
</div>
I think you can easily adapt it to your website.
Now i don't have a copy of IE7 and i can't reproduce the problem, but you can try and that should fix your problem. If it doesn't i'll try to assist you furtherly.
Related
I am testing this in IE 11:
Codepen
I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working:
#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
height: 100%;
}
If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.
How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.
Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.
http://codepen.io/next1/pen/qZRpEB
after clicking on any of md-dialog buttons (ok,cancel,create..) the dialog it self diaper but a <div class="md-dialog-container"></div> which is part of the default dialog code dose not diaper and act as a cover to the all web page, turning it unresponsive..
i have found this link https://github.com/angular/material/issues/3782 but the solution suggested doesn't seem to work..
any advice would by highly appreciated
i ended up using some basic js to solve this problem
js:
$scope.removeDialogContainer=function(){
$('.md-dialog-container').addClass('display-none-md-dialog-container');
};
css:
.display-none-md-dialog-container{
display: none !important;
}
adding this code ($scope.removeDialogContainer()) to the relevant dialog buttons seems to work
in my opinion it's not the best solution, would have preferred a css or html solution, not using js..
I am new to Bootstrap and Angular. In my webpage there is a button and i am providing a popover for a span like this
<span popover="Download Project History" popover-trigger="mouseenter" tooltip-placement="top" style="padding: 5px" translate="DOWNLOAD">DOWNLOAD</span>
But its getting hidden under navbar.
Based on my googling i found to provide data-container="body" in the html element. But its not working too.
Can anyone please help me?
Thanks
I had a similar problem where the popover was hidden behind overflow content and adding the following attribute fixed it:
popover-append-to-body="true"
tooltip-append-to-body="true"
attaches the tooltip to the body and makes it visible.
You need to override the z-index value, you can have a look for the default values (for navbar and popover) in original Bootstrap's CSS file. In my case this helped:
.popover {
/* just in case it would overlap with fixed navbar, then show this over the navbar. Original value 1010, value for navbar is 1030 */
z-index: 1030;
}
Having a very strange IE7 issue that I cannot find a fix for. I have created a slideshow with a control nav absolutely positioned at the bottom of it. The nav sits over the slideshows bottom border.
In ie7, hovering over it cause the nav to jump behind the border and hence the top of it disappears. I don't have a clue what is happening and cannot find solutions elsewhere. Here is a link demonstrating the issue:
http://rivaslider.matthewruddy.com/
Anyone have a solution? Pulling my hair out.
I found many questions about this issue and i tried all of the solution i found (z-index to parent, relative position to parent, the corner plugin etc...), but nothing seems to help. Here is the demo:
http://visztpeter.me/Develop/index.html
Works in all browser, except IE7. Any idea?
Ok, i found a solution:
aside nav li{
z-index:1;
}
aside nav li.sfHover {
z-index:2;
}
So basicly i just need to add more z-index to the list element that has dropdown menu inside.