Angular Material Datepicker pop up out of place - angularjs

I am using Angular Material version 1.1.4 with Angular version 1.5.9, when I add md-datepicker on my page the datepicker's popup is opening out of position.

Related

Show Bootstrap 3 Modal using AngularJS

I am using AngularJS 1.5.0 and Bootstrap 3.3.6.
I am trying to display the Bootstrap Modal Plugin using AngularJS.
It is easy to display using Bootstrap JS Modal
$("#myModal").modal() works with JQuery, but I need to get this working with AngularJS.
I suggest to install the UI Bootstrap which is a Bootstrap components written in pure AngularJS. Then you can use the Modal as seen in the Demo here

Kendo React Bootstrap Datepicker year not clickable

I am using Kendo DatePicker control in React Bootstrap. It seems to be working fine, but when I try to change the year it is not working. I am using React 16+ and Bootstrap 3.3.
below is the scrrenshot for same
Please try updating the packages. It is clickable with the latest version: https://stackblitz.com/edit/react-7ae58b?file=index.html

What version of UI Bootstrap works with Angular 1.6.3?

I am using AngularJS v1.6.3 and am trying to find a version of UI.bootstrap that works with it (in terms of Bootstrap's Javascript functionality, such as popover).
This Plunker uses UI.Bootstrap v0.12.0 and the popover works:
http://plnkr.co/edit/6ris13k1kZCGLvO7CP4B?p=preview
This Plunker uses UI.Bootstrap v2.5.0 and the popover does not work:
http://plnkr.co/edit/NS8OLrKXCfKdHrQ8TRwK?p=preview
This is the popover code that does not work in the latter:
<p>Click me and see popover on the right.</p>
I suspect I am doing something wrong. Thanks!
In newer versions of Angular UI Bootstrap, the directive name has been changed from popover to uib-popover. This is a fork of your 2nd Plunker in which the popover is displayed on the right of the link.
You can find the new directive name here

Angular Material md-select not displaying md-options and freezes page upon click

I just updated the version of Angular Material I am using to 1.0.6
Now when I use md-select + md-option, although all the correct options and corresponding md-option DOM elements display in the inspector, the drop down list does not display upon click, and instead the page (Chrome browser) freezes completely. No console error is thrown.
Here is my code:
md-select(
aria-label='select number of seats'
ng-show="bookable.seatsperbooking>1"
ng-model="appt.seats")
md-option(
ng-repeat='num in getnumber(seatsallowed) track by $index'
value='{{num}}') {{ num }}
and here is a screenshot of the inspector, which shows the correct number of option DOM elements:
screenshot of options
This was happening because the Angular + Angular Material versions I was using were incompatible. Angular Material 1.0.7 seems to require at least Angular 1.4 (Angular Material 1.0.7 was not working with Angular 1.3.20)
Having same problem.
After updating AngularJS to newer version 1.5.5 (w/ Angular Material 1.0.7) solved the problem.
Same issue here. I have Angular Material 1.1.0.
Updated Angular from 1.3.15 to 1.5.8. Fixed.

In Angular collapse directive, if change contents, collapse div doesn't update height

We have an Angular UI Bootstrap Collapse directive in our Angular app. When we change the contents of the collapse, we would like the div to update appropriately.
However, apparently the height is set in the style when the collapse is opened and does not update if we change the contents of the collapse element. If I change the contents while it is open, then the height does not change. This seems like it should be taken care of automatically. Is this a known issue and what is a good way to get around it?
Using Angular 1.2.2, UI 0.9.0, and Bootstrap 2.3.2
Version 0.9.0 of the angular-ui/bootstrap is not compatible with Bootstrap 2.3.2 CSS. 0.8.0 is the last version that supports Bootstrap 2.3.2 CSS. You either need to use 0.8.0 or migrate to Bootstrap 3.

Resources