CODEWITHSUNDEEP
angularjsangular-strap
tijs
tijs

Reputation: 797

How do i make modal placement and animations work in angular-strap

I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.

I have:

  1. angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
  2. i have the angular-motion.css file loaded too
  3. the modal opens at the top, without animation whatever i set for animation or placement

Am i missing more css or js requirements not in the docs?

Upvotes: 1

Views: 1928

Answers (1)

tijs
tijs

Reputation: 797

Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:

angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);

This is actually mentioned on the github page but not in the docs so i missed that.

The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:

data-placement="center"

.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css

or just copy the part for centering modals:

.modal.center .modal-dialog {
    position:fixed;
    top:40%;
    left:50%;
    min-width:320px;
    max-width:630px;
    width:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}

Upvotes: 1

Related Questions