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;
}
Related
Is it possible to make the whole card a link in Angular material or is there another directive intended for this use case?
You can just put a ng-click on the card and perform your operation.Further you can style the card with hover effects to get the feel of a link.Like this :
HTML:
<md-card ng-click="cardSelected()" class="cardAsLink">
....
</md-card>
JS:
$scope.cardSelected=function(){
console.log("card Clicked");
}
CSS:
.cardAsLink{
cursor: pointer;
}
.cardAsLink:hover{
border : 1px solid blue;
}
Yes you can put an anchor tag around the card. I think it is the better solution because you have the hole functionality of the anchor tag. In Ramblers answer clicking would work fine and if you use the the router the historie would also be korrect, but thinks like clicking with the mouse wheel to open a new tap would not work. The same goes for right mouse click thinks and the navigation preview on the bottom of the browser would also be missing.
I am facing issue with Angular ui-select (replacement for HTML select). I have added the option append-to-body so that it can be shown on top of other elements.
But I am facing an issue that when it is used on top of bootstrap modal, it does not show list of options. In fact it shows the list of options are displayed behind the modal, as you can see in the image.
Is there any workaround that issue?
Simply add a z-index CSS property greater than 1050 for the parent element of the ui-select element.
Why greater than 1050?
Because the z-index on the .modal class is set to 1050 so we need to provide higher z-index of the parent element of the dropdown so that it can appear above the modal in z-axis.
I was facing the same problem and in my case I was using append-to-body="true" in my ui-select directive. Setting this to false fixed it for me.
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..
Plunkr : http://plnkr.co/edit/17ime385yybvlCXWBsTX?p=preview
Accordion tab overlaps the ui-select (not ui-select2) search result. I have recreated the problem in the plunkr. I tried tweaking css with z-index but doesn't seem to work. Any idea how to fix this
div with class "select2-drop select2-with-searchbox select2-drop-active" has position absolute. If you change it to relative or inherit, it will appear.
.accordion-body.in { overflow:visible; }
The above css code was all needed. Apparently the problem was with the bootstrap accordion and not the ui-select.
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.