Hi I'm adding a popover to UI grid in AngularJS. The idea is when the user mouse-over a row a popover will show up, and the popover contains a directive. I've successfully implemented this part, but now the problem is that part of the popover is blocked by the ui grid table, like this:
I want to bring the popover to the front, and I've tried setting z-index for both the ui grid table and the popover. Related code is here:
JS part:
function rowTemplate() {
var template = [];
...
template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>');
return template.join(' ' );
}
HTML:
<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative">
</div>
<script type="text/ng-template" id="popover.html">
<div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative">
<directive-related part />
</div>
</script>
But after I set the z-index it's still not working. How can I resolve this?
Some of my references are here: popover: popover, z-index: z-index.
Thanks!
Note: I am making the assumption here that you are using ui-bootstrap.
I have found that usually you need to use the append-to-body attribute with ui-grid custom formats.
Try changing the template like so to add that attribute:
template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')
Related
I have a modal window that shows a few data that also has Images which open in Blueimp gallery. The problem I have is, when the image is opened in BlueImp gallery, the image is not vertically aligned in the middle of the screen. Its either to the bottom or to the top and it depends on where I have scrolled in the modal window. I need to go to the middle of the modal window and open the gallery in which case the Lightbox looks centered. This issue doesnt happen when blueimp is used directly in the page without a modal. It appears the blueimp gallery's lightbox is centered to the whole modal height instead of the viewport height. How can I override that for blueimp inside modal windows only? Is there a css fix or js fix to override this when blueimp is used in boostrap modals?
Here is a sample of my set-up:
<div uib-modal-window="modal-window" class="modal fade" role="dialog" size="xl" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-xl">
<div class="modal-content" uib-modal-transclude="">
<div class="lightBoxGallery">
<a ng-repeat="image in vm.ngModel" ng-href="{{::vm.imageurl(image.name)}}" data-gallery="">
<img ng-src="{{::vm.getImage(image.name)}}" class="img-responsive img-thumbnail animated fadeIn">
</a>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol> </div>
</div>
</div>
</div>
</div>
My set-up: Angular 1.5 + Bootstrap 3 + Bootstrap UI + BlueImp Gallery
UPDATE:
The problem I am having here is, my Bootstrap Modal window has overflow-y as scrollable and it has a fixed positioning:
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
And when the blueimp-gallery is opened, as a child div with fixed position, it is positioning the Div to the center of the parent's fixed position instead of center of the viewport:
.blueimp-gallery {
position: fixed;
z-index: 999999;
overflow: hidden;
background: #000;
background: rgba(0,0,0,.9);
opacity: 0;
display: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none;
}
The blueimp-gallery is aligning to the middle, but I dont want it aligning to the middle of parent (modal) div. I want it aligned to the middle of viewport. For example, in my laptop, my modal has a height of 2000px where as my viewport height is a lot less like 860px. That is why the gallery lightbox is opening either to the top or bottom of the viewport unless the user is right in the middle of the modal window. If I place the blueimp-gallery directly in the body without the modal window, I dont have this issue. But in this use case, I have to place the blueimp-gallery inside a Modal window that has variable height depending on the dynamic content loaded in it.
I am still stuck on this, does anyone have a suggestion to this problem please?
The only way I was able to resolve this issue was to pull the "#blueimp-gallery" element out of the Modal Window and then insert it again as a direct child of the body element. Using Jquery, I added this code that fixed the issue:
$(document).ready(function(){
$("#blueimp-gallery").prependTo($("body"));
});
Now, after the above code, the BlueImp Gallery's fixed position is relative to the body element and therefore the height is that of the viewport. The Modal height no longer affects the BlueImp Gallery's height since it is now placed as a direct child of body element.
You should try to put the blueimp in a div with the class row and then another div with the class col-md-6 not 100% sure but it should be alligned in the middle then.
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="blueimp-gallery" class="blueimp-gallery vcenter ">
...
</div>
</div>
</div>
Edit tried it it has to have container tag above it to.
most likely this is not the sollution to getting it to the center vertically but this is worth a try i guess
ADDITION
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
create a costum tag add it in a css file and call on it.
I am using ng-dialog to display the popup. The problem i am facing with ng-dialog is there is no vertical scroll bar on the dialog box when the message is huge but scroll bar appearing for the entire html page.
Is there a way i can bring the scroll bar on the ng-dialog box.
I am using the ngdialog.js from https://github.com/likeastore/ngDialog
I googled my best but not getting any idea about how to bring the scrollbar. Please i am just bigger in the css.
below is the code which i am using to bring the popup.
ngDialog.open({ template: 'resources/views/popup.html', className: 'ngdialog-theme-default' , scope: $scope });
any suggestion much appreciated.
You should set overflow-y: scroll; on your content element within your dialog template.
HTML:
<div class="modal-content">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items">{{::item.name}}</li>
</ul>
LESS:
.modal-content {
.choose-modal-content {
height: 100%;
width: 100%;
ul {
&.list-group {
overflow-y: scroll;
}
}
}
}
This way the ul will be scrollable when the content overflows.
I am using Angularjs UI Bootstrap Tab set. In order to avoid initial flicker issue, with tab names, I am using ng-cloak, but surprisingly still the initial flicker is appearing. I guess it is due to the large html content I have. Can any one suggest any fix for this?
The following is my tab set, and tab names are causing initial flicker issue.
<body >
<div class="splash" ng-controller="ApplicationController" ng-cloak>
<p>Please wait while loading!</p>
</div>
<div id="content" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
<tabset>
<tab ng-repeat="eachTab in chartsTabs" heading="{{eachTab.tabName}}" select="createChartsPerTab(recordsSet, eachTab)"> </tab>
</tabset>
</div>
</body>
The following is my piece of code using ng-cloak:
<div id="splash" data-ng-controller="MainCtrl" ng-init="init()" ng-cloak>
And in my custom css file I have :
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
What I would suggest is, as your tab name is seen with flicker effect, the issue is at the directive level, you can modify your directive tab's template html to include a ng-cloak wherever the name of tab appears.
You should also put a ng-cloak directive on your other container. I.e.
<body ng-controller="ApplicationController">
<!-- Please note that this splash is a separate div beside the main div -->
<div class="splash" ng-cloak>
<p>Please wait while loading!</p>
</div>
<!-- and here comes your content div -->
<div id="content" ng-controller="ContentController" ng-cloak>
<!-- everything else here -->
</div>
</body>
and your custom css looks like:
/* this css rule is to hide everything with the ng-cloak directive */
[ng-cloak] {
display: none !important;
}
/* this css rule displays the splash element if the ng-cloak directive is active */
[ng-cloak].splash {
display: block !important;
}
/* just style your splashscreen */
.splash {
position: absolute;
background-color: #ededed;
color: #ffffff;
display: none;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 5000;
}
.splash p {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 500px;
height: 20px;
text-align: center;
margin: auto;
}
ng-cloack could not be used until the angularjs library is not loaded completeley.
try to work with the directive ng-include because it will only show the content after angularjs library is loaded and everything is compiled.
for example:
<html lang="en" ng-app="myApp">
<body ng-cloak ng-controller="YourController">
<div class="container">
<div ng-include="'templateWhichIsCompletelyCompiled.html'"></div>
</div>
</body>
</html>
I have an app running in an iframe and it makes use of angular ui boostrap tooltips. Unfortunately if the element with the tooltip is on the edge of the iframe, the tooltip will be cutoff by the iframe. Is there any solution to this? Should I play with its position within the iframe, or the z-index value?
UPDATE
So I'm trying to override the tooltip positions (note that I an using angularjs ui bootstrap). I have 2 tooltips which each require their own positioning. I managed to change the css styles (colours and fonts) globally, but I'm having trouble targeting each one to give them unique positions. I have the following html and css:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<li tooltip="Bar">B</li>
</ul>
</div>
Tooltip "Foo" needs a different position that "Bar". So I'm trying to access the li tags using the following css, but it doesn't work.
#my-div > ul > li:nth-child(1).tooltip.top {
margin-left: 10px;
}
#my-div > ul > li:nth-child(2).tooltip.top {
margin-left: 30px;
}
Note that .tooltip.top is the bootstrap class added via the angularjs tooltip directive. I'm guessing this doesn't work because the directive is actually adding another element somewhere.
So it turns out angular will insert a div element right after the element defined as the tooltip. So in my case, when the tooltip event for A is triggered, angular inserts the new element like so:
<div id="my-div">
<ul>
<li tooltip="Foo">A</li>
<div><!-- tooltip for foo --></div>
<li tooltip="Bar">B</li>
</ul>
</div>
Therefore the solution I came up with was to add id's to each of my li tags:
<li id="foo-tip" tooltip="Foo">A</li>
<li id="bar-tip" tooltip="Bar">B</li>
and then access the css tooltip element like so:
#foo-tip + div {
margin-left: 25px;
}
#bar-tip + div {
margin-left: 15px;
}
In my AngularJS app there is a controller which contains a list with messages:
$scope.messages = []
This list is updated as the application runs. In the template it is rendered in the following way:
<div style="height: 200px; overflow: auto">
...
<li ng-repeat="msg in messages">{{msg}}</li>
...
But when more messages comes than fits the 200px height, the scroll remains on the top.
How to automatically scroll to the bottom of the message list?
There is a directive "scroll-glue" from this library https://github.com/Luegg/angularjs-scroll-glue that solves the problem.
Just add scroll-glue directive to the div:
<div style="height: 200px; overflow: auto" scroll-glue>
...