I used seiyria angular-bootstrap-slider for range slider,but initially when page loads the tooltip is at wrong position.when it is placed in normal page it is working fine,but in modal it is intially at wrong position,but when I click it will be set.So how to slove this issue.
HTMl:
<button class="btn btn-default" value="modal"
onclick="confirmChangeMaxHours();"><i
class="glyphicon glyphicon-cog"></i> Adjust Value
Here is the link:
Codepen
I found this suggestion in some site:
setTimeout(function() {
slider.slider("relayout");
}, 500);
But,where I have to give setTimeout function,I tried to give but it is showing error like Slider is not defined.
Thanks in Advance.
add this css into your code
.tooltip{
margin-left:-32px!important
}
In my implementation the modal was over the tooltip. So, to fix it, I put the tooltip over all elements by adding a big z-index to all tooltips.
.tooltip.tooltip-top,
.tooltip.tooltip-bottom,
.tooltip.tooltip-left,
.tooltip.tooltip-right {
z-index: 100000;
}
Related
I am trying to add a conditional tooltip over a button. Using primeng tooltip component:
<div pTooltip="Please upload" style="display:inline-block;" tooltipPosition="top"
tooltipDisabled = "flag">
<button class="btn btn-primary btn-xs"><i class="fa fa-check"
aria-hidden="true"></i></button>
</div>
It is not working.
However, tooltip without "tooltipDisabled" is working fine.
Can someone please help me?
use [tooltipDisabled]="flag" instead
tooltipDisabled is looking for a boolean.
You are giving it a string (and not the flag attribute of your component as I would expect seeing the code).
Use [tooltipDisabled]="flag" instead.
I know this thread is old but maybe help others like helped to me. The listed solutions did not solve my problem but give me an idea: Only when i put [pTooltip]="variableWithMyText" with brackets and bind into a local variable with text content and combined with [tooltipDisabled]="flag", my code worked perfectly.
HTML (Condensed to minimum attributes for explanation):
<div [pTooltip]="tooltipText" [tooltipDisabled]="hideTooltip"></div>
Typescriptp file (Condensed to minimum attributes for explanation):
hideTooltip: boolean;
tooltipText = 'This text will showed on Tooltip';
if(conditionToShowTooltip){
this.hideTooltip = true;
} else {
this.hideTooltip = false;
}
I wanted to place a Typeahead directive on a Modal dialog. The problem is that when typeahead show it's list of possible matches it is behind modal-footer div. I played with append-to-body then the whole list is behind the modal dialog. Also played with append-to no luck. Any suggestion?
The solution was to add this attribute to html:
typeahead-append-to-body="true"
and in the css file this:
.dropdown-menu {
z-index:9999;
}
Now the Typeahead displays correctly over the modal dialog.
I am using ng-map directive and place autocomplete API in my angularjs application. which are working fine.
but the problem is I need Both in a bootstrap modal and when i am using same code in a bootstrap modal, Nothing is working neither ng-map nor place autocomplete.
Suggest me if I am missing something.
problem occures only when i use angular's ng-map directive. With javascript everything works fine but I don't want to write bulk of code. I wanna use ng-map only.
Here is my markup
<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>
<directions
draggable="false"
travel-mode="DRIVING"
panel="p3"
origin="jaipur"
destination="Delhi">
</directions>
</ng-map>
see my
plunkr
for whole code
Since the map is displayed in bootstrap modal, the map needs to be explicitly intialized once the modal dialog is opened as demonstrated below:
$('#myModal').on('show.bs.modal', function(e) {
$timeout(function() {
google.maps.event.trigger(vm.dialogMap, 'resize');
vm.dialogMap.setCenter(vm.mapSettings.center);
vm.dialogMap.setZoom(vm.mapSettings.zoom);
});
});
'show.bs.modal' event is triggered once the modal is opened.
From another hand, unfortunately angularjs-google-maps at the moment contains a bug that prevents the route to be printed if multiple map instances are added into a page (in your example there are two map instances)
In the below example is provided a workaround.
Working example
The following forked plunker demonstrates how to:
properly display map in modal dialog
print routes in multiple map instances
add a style
.pac-container { z-index: 10000 !important; }
ref from there
Google Places Autocomplete not showing up
here a plnkr for a your working example
http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview
I am using angular material in my angular app. I want to put a md-tooltip on md-progress-bar but it is not working. md-tooltip works fine on other elements like md-icon but not on md-progress-linear. Any help. Here is how I am using it.
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
I had to wrap the progress bar and tooltip in another element, but not nest the tooltip inside of the progress bar:
<div class="progress-container">
<md-progress-linear md-mode="determinate" value="50"></md-progress-linear>
<md-tooltip>Hello</md-tooltip>
</div>
I styled the container to make it taller than it is, because I needed it to be clickable, but not have a tiny hitbox.
Demo: http://codepen.io/langdonx/pen/GowBeq
I know this is pretty old, but I just found myself a solution and maybe this can be used by others as well.
Putting the tooltip directly under the progressbar doesn't work, but you can wrap the whole thing in a div or span:
<div>
<md-progress-linear md-mode = "determinate" value = "value">
<md-tooltip>
Hello
</md-tooltip>
</md-progress-linear>
</div>
This way it works fine. Haven't found anything else yet and it doesn't seem to have a solution in the official discussions
I have a div element that I only want to be show when my list of items empty. So I put in the following(in haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Any ideas what I am doing wrong?
You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.
This should be all you need to do:
<div ng-hide="items.length" ng-cloak>no items</div>
Sample fiddle.
None of the solutions worked for me. The only solution I found is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
There's currently an open issue for this:
https://github.com/angular/angular.js/issues/14015
This workaround worked for me:
.ng-hide.ng-hide-animate {
display: none !important;
}