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.
Related
Created Polymer app using polymer init command and selecting app-drawer-template.
In my-view1.html, linked to paper-toast.html and modified the template and script as follows:
<template>
<div class="card">
<div class="circle">1</div>
<h1>View One</h1>
<button on-tap="handleTap">open</button>
<paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>
</div>
</template>
<script>
Polymer({
is: 'my-view1',
handleTap: function(){
this.$.toast0.open();
}
});
When the button is clicked, the toast appears but most of it appears behind the Menu drawer and only part of the toast window is visible.
I tried to center the toast using css but it does not work. Setting z-index did not work either. How can the toast window be positioned so it is not hidden behind the drawer?
Following css also can solve your problem.
paper-toast {
width: 300px;
margin-left: calc(50vw - 150px);
}
Added the following css class to toast element:
.mytoast {
width: 100%;
text-align: right;
}
Now toast window spans the page and text shows aligned to right end .
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>')
I'm new in AngularJS, how can i show popup a div on mouseover using AngularJS. If i resize a div on mouseover, it changes whole structure, how to show popup div without disturbing neighbors elements.
Markup
<div ng-repeat="x in images | filter:test" style="float:left; width:30%" ng-mouseover="count=1" ng-mouseleave="count=0" >
<img ng-src="{{x.path}}"
style="width: 100px; height:100px"><div> {{x.company}}</div>
<div style="background-color:#E6E6FA;text-align: center;"ng-show="count">
price:{{x.price}}</br>
size:{{x.size}}</br>
</div>
</img>
<div/>
I added extra things in markup like company,size on mouseover. help me in pop a image on mouseover. Thanks in advance
You have to do two things. First you have to position your popover element absolute, so that it doesn't disturb the flow of the other elements when it pops up. Something like this (z-index is what makes it to be over the other elements):
.popover {
position: absolute;
z-index: 100;
}
And in your html-markup you can use the ng-mouseover directive.
<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>
Your angular controller will probably look something like this
$scope.showPopover = function() {
$scope.popoverIsVisible = true;
};
$scope.hidePopover = function () {
$scope.popoverIsVisible = false;
};
If you have more than one, you are probably better of putting all that stuff into a directive
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>
...