Can figure out why would that happen. Other directives from ui.bootstrap work: alert, progressbar, etc. Yet popovers and tooltips for some reason stopped working. Anyone had this problem? I had a problem before - when for some reason default css rule for tooltip was opacity:0. But this time a bit different problem. It's not even adding tooltip related stuff to the DOM, as it used to be.
Also I notice from controller of a view where tooltip being used I used to have access to stuff like tt_title, tt_isOpen, tt_placement, etc. Now suddenly I can't do that anymore.
I'm suspecting something to do with browserify we're using. I noticed tooltips not working on my computer first, while on my colleague's they still would work, and then he removed bower files and node_modules, cleaned both npm and bower cache, and tooltips and popovers stopped working for him as well.
I've tried adding ui.bootstrap.tooltip explicitly as a module dependency, although I already have ui.bootstrap listed.
Please, if anyone had similar problems, and know possible solution, help me.
I had the same problem after updating a project from 1.2 to 1.3 and the tool tips stopped working. It seems there is a bug with Angular 1.3. You can read about it here:
https://github.com/angular-ui/bootstrap/issues/2828
I fixed the problem by putting some extra attributes on each tool tip:
<div tooltip="After today restriction" tooltip-trigger tooltip-animation="false" tooltip-placement="bottom">Hover me</div>
I am using 1.3.5 and adding
tooltip-trigger tooltip-placement="top"
Did the trick.
In Angular 1.3.14 and Angular UI Bootstrap 0.11.2, you'll need to include all of the following attributes to make the tooltips work:
tooltip="Edit notifications"
tooltip-trigger
tooltip-animation="false"
tooltip-placement="top"
I was able to make my tooltips start working again by adding the attribute:
tooltip-trigger
...and that was all that I needed. I typically use the same attributes on all of my tooltips, aside from the placement which I tend to alter dynamically for responsiveness.
Although the other responses state that you must use tooltip-placement="top" or tooltip-placement="bottom", I did not find this to be the case. Each tooltip placement is working for me. I am using Angular 1.4.8.
On each of my tooltips I am using:
tooltip-trigger
tooltip-placement="{{tooltip-placement}}"
tooltip="{{tooltip}}"
tooltip-append-to-body="true"
Like I said, adding the tooltip-trigger attribute made it work for me.
I removed the attribute tooltip-append-to-body as a test and my tooltips still work.
In my conclusion, adding tooltip-trigger as a attribute is the fix for this.
Related
I am using Angular 1.5.* together with Kendo UI. I am following the documentation and have completed all the recommended steps found on the Telerik site:
Including the kendo scripts and styles
Adding kendo.directives to my angular module
Using the kendo-[directive] syntax in the markup
Everything renders fine, but when I try to interact with the widgets I am getting the following error:
Uncaught TypeError: f.getClientRects is not a function(…)
This is what my markup looks like:
<input kendo-date-picker ng-model="model.user.dob" />
The same error happens when I try to use a drop down list defined as:
<select kendo-drop-down-list k-data-source="model.languages" ng-model="model.user.language"></select>
I have used Kendo for years, but for the first time, I am using it together with Angular and feel a little lost :)
What am I missing? Any help would be greatly appreciated.
Thank you
I would make sure you have the kendo scripts in the right dependency order
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./bower_components/angular/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
Another thing that might work for older versions of kendo, is trying the deprecated angular-kendo npm package
<script src="./bower_components/angular-kendo/angular-kendo.js"></script>
Or, it could be caused from the animations so try angular-animate npm package:
<script src="./bower_components/angular-animate/angular-animate.js"></script>
Another thing you might want to check is the date going into the Kendo DatePicker
$scope.model.user.dob = new Date('2016-06-01T04:00:00');
It turns out that the issue was in the kendo version I was using. Once I upgraded to the latest build, everything went back to normal.
I just started using Angular for university purpose and I wanted to start easy so I just copied some stuff for the official Angular material page into my editor.
(Used bower to install angular-material "bower install angular-material")
This is my code (image, because they don't like HTML code here):
http://imgur.com/pr8YYvN
The button is showing up, but the fancy "click on" animation doesn't work and I cannot see the button description neither!
It was me who add the "." in front of every src/href (the button is not there on the original angular example page, but without the dot, the font won't even be in material style but just standard e.g. Arial)
Where is the problem, did I forget something?
Thanks in advance!
You are using the controller MainCtrl in your application, but you never actually created a MainCtrl in your JS. You also reference YourController in your JS, which is also not declared anywhere.
I recommend to read the error messages angular is giving you in the console.
Just switched to v0.11 of UI Bootstrap and the datepicker-popup is no longer working.
It works fine with v0.10. Anyone know what has been changed in the new version which might be causing the problem?
Nevermind. I should have checked the github first.
There is a bug report on the datepicker.
https://github.com/angular-ui/bootstrap/issues/2180
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.
I'm using AngularJS with requireJS with angularstrap. Right now I simply want to get a datepicker working in my modal box which also uses angularstrap and bootstrap but I keep recieving the error:
Cannot read property 'dates' of undefined
myctrl1.js is the file that downloads datepicker.js and I have all my dependancies in main.js listed. I have never been able to get what should be a fairly simple thing to work so posting here is my last resort.
Plunkr here: LINK
Main files are index.html, controllers.js, myctrl.js
I had the same issue when using jQueryUI. This datepicker is incompatible with jQueryUI datepicker (both use datepicker name), so you should remove jQueryUI from your code or do some namespace workaround.
Perhaps you forgot add bootstrap-datepicker.js on your page. I had same problem and this was solution.