I got a view with an ion-slide-box
I include some simple ng-hide animation on a div somewhere in the template
Doesn't work.
I remove ion-slide-box elmt.
It works!
Any idea?
Fixed it by replacing deprecated ion-slide-box with new ion-slides
Related
I'm trying to prevent my carousel from stopping when the mouse is over the slides. I've tried to add pause=false in the uib-carousel directive as I have read somewhere else however that doesn't work. I'm also inspecting the element but can't really find where can I set that option (if that's possible).
I have also seen people adding to the .carousel class the pause=false and then I tried to add to add the CSS without success as well.
Any ideas?
I would first confirm ngAnimate is not interfering with the carousel in any way. To accomplish this, simply follow the instructions in this post: ngAnimate breaks existing ui.bootstrap.carousel
I've just checked https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js and looks like there is an attribute for that directive called "no-pause". I will give that a go!
I'm trying to use angular ui router with core-animated-pages. Right now I'm stuck because if I include the ui-views inside the sections of a core-animated-pages element, and all of that is inside a <template is="auto-binding"> element, then the transition works but angular does not fill the ui-views. I think it because the template makes it all part of the shadow dom.
Here's a plunkr: http://plnkr.co/edit/tYyuKLO1O5JQVtpNg9Th?p=preview
Thanks.
I was wrong - you don't have to use template.
And here's how you do it!
https://github.com/morgs32/angular-polymer
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:
angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
i have the angular-motion.css file loaded too
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?
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%)
}
toggle functions only fire on the second click. I had this problem some time ago with a datetimepicker libary. Now the problem exists with bootstrap.
Here is my Jade-Code:
ul.nav.navbar-nav.navbar-right
li.dropdown
a(href="#", class="dropdown-toggle", data-toggle="dropdown") Einstellungen
b.caret
ul.dropdown-menu
li
a(href="#") test
The dropwdown only toggles with the second click. And dont no where i have to search to find the mistake. Is there maybe a code to detect what is happend with my first click?
When is user the css to collapse on hower it works fine, with the first hover :(
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
margin-top:0px
}
The project is to big to post it on Fiddle :(
I hope you can give me some advices.
Thanks!
One option might be using the angular-ui-bootstrap route instead of trying to get vanilla bootstrap javascript to work with your angular app. Below is a link to the angular-ui-bootstrap site; try implementing one of the angular-native directives for a drop down and see if that does the trick.
http://angular-ui.github.io/bootstrap/
Aside from that, it's hard to help if we can't recreate your problem. Can you try recreating small version of the problem in a codepen or jsfiddle?
Plunkr : http://plnkr.co/edit/17ime385yybvlCXWBsTX?p=preview
Accordion tab overlaps the ui-select (not ui-select2) search result. I have recreated the problem in the plunkr. I tried tweaking css with z-index but doesn't seem to work. Any idea how to fix this
div with class "select2-drop select2-with-searchbox select2-drop-active" has position absolute. If you change it to relative or inherit, it will appear.
.accordion-body.in { overflow:visible; }
The above css code was all needed. Apparently the problem was with the bootstrap accordion and not the ui-select.