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?
Related
I'm using angular bootstrap https://angular-ui.github.io/bootstrap/ with class table-responsive. The problem is on the datepicker will display inside the table such as picture below:
I could fix it with:
.table-responsive {
overflow: visible;
}
and it will nicely work:
Now if I add the fix above, my display in mobile will end up like this:
It will not become scroll able and it will overflow my screen. How do I fix this?
Please help me and thanks in advance.
Use datepicker-append-to-body="true" with the popup version to have it linked to the body. It will appear above your table nicely.
Here it is, in a plunker.
I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what http://lab.hakim.se/scroll-effects/mobile.html is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).
Im using ngAnimate along with Angular and Ionic, I created the snippet here http://play.ionic.io/app/4ae65754fc64 (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.
Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.
But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.
The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.
The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.
Hopefully this gets you in the right direction when implementing your final solution.
Ionic demo: http://play.ionic.io/app/3c0e90238fe8
Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo
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!
after clicking on any of md-dialog buttons (ok,cancel,create..) the dialog it self diaper but a <div class="md-dialog-container"></div> which is part of the default dialog code dose not diaper and act as a cover to the all web page, turning it unresponsive..
i have found this link https://github.com/angular/material/issues/3782 but the solution suggested doesn't seem to work..
any advice would by highly appreciated
i ended up using some basic js to solve this problem
js:
$scope.removeDialogContainer=function(){
$('.md-dialog-container').addClass('display-none-md-dialog-container');
};
css:
.display-none-md-dialog-container{
display: none !important;
}
adding this code ($scope.removeDialogContainer()) to the relevant dialog buttons seems to work
in my opinion it's not the best solution, would have preferred a css or html solution, not using js..
I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.
See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?
Thanks in advance.
Spent quite some time tracking all the problems in your plunker, there were quite a number of them:
you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>
The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.
If you remove the overflow: hidden; from the .ngCell it all starts to "work":
http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview
I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.
More info about how to make work ng-grid + typeahead inline editing:
http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/
plunkr:
http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info