Currently when an element is hidden via ng-hide, first the element gets display="none" then the animation happens. Is there a way for display="none" to be added once the animation is finished?
The common suggestion is to add a display: block !important rule for the .ng-hide-add , .ng-hide-remove classes. The add and remove versions of hide class are added by ng-animate and removed after the relevant animation.
Sources: https://docs.angularjs.org/api/ng/directive/ngHide
http://ng.malsup.com/#!/css-animations-for-ng-hide_ng-show
Related
I am facing issue with Angular ui-select (replacement for HTML select). I have added the option append-to-body so that it can be shown on top of other elements.
But I am facing an issue that when it is used on top of bootstrap modal, it does not show list of options. In fact it shows the list of options are displayed behind the modal, as you can see in the image.
Is there any workaround that issue?
Simply add a z-index CSS property greater than 1050 for the parent element of the ui-select element.
Why greater than 1050?
Because the z-index on the .modal class is set to 1050 so we need to provide higher z-index of the parent element of the dropdown so that it can appear above the modal in z-axis.
I was facing the same problem and in my case I was using append-to-body="true" in my ui-select directive. Setting this to false fixed it for me.
I've successfully created a responsive menu using Angular UI Bootstrap. The problem is:
When the responsive menu is open it can only be closed by re-clicking the toggle. Clicking anywhere else on the page keeps the menu open, which is undesirable for the site I'm building.
I'm looking for this functionality:
Clicking anywhere except the menu should close the menu, not toggle it.
How would one go about achieving this? I tried setting an ng-click on the html or body elements and seeing if that would work, but it didn't.
This actually fairly simple to solve with a little extra CSS and an added div.
Plunker Demo
The mechanics of this solution are pretty straightforward: Add an extra div to the navbar markup that serves as a clickable backdrop when the menu is expanded.
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
To make sure that the backdrop covers the entire viewport, you'll use position: fixed and set the top, right, bottom and left properties to 0. Then you'll need to make sure that the backdrop doesn't cover the menu, rendering your menu items un-clickable. To do this, you need to set its z-index to -1. Finally, to make sure it's 'clickable' you need to give it a background. Setting the background-color to transparent makes sure that it doesn't obscure any of the navbar elements.
The next thing you need to do is ensure that the backdrop element is only displayed when the menu is expanded, otherwise it would cover your body content and make it impossible to interact with any of the content. The cool thing is that the ngClass directive makes this simple. You can use the isCollapsed scope variable to determine when to add the backdrop class by setting the expression to isCollapsed === false. Lastly, add an ng-click attribute to close the menu. So, the markup looks like the following:
MARKUP:
<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div>
When the backdrop class is not added, the div--which has no content--will naturally collapse to a height of 0, so there's actually no need to hide or show it.
Just remember that the backdrop div has to be added to the same element that is handled by your controller that manages the collapse state of the menu. If it can't access the isCollapsed scope variable, it won't display and the ng-click event will have no effect.
You can easily improve this by creating a simple custom directive, so that you don't have to add the div in your markup. Just set the scope property of the directive to true so that the directive has access to the parent isCollapsed variable.
I have a number of collapse directives in an app and i'd like to be able to individually switch their animation on and off (to 'force' them open or closed), depending on specific state. I've looked at the source and can't see where i'd be able to hook into the directive to achieve this. Or am i missing something obvious?
The only solution i can see at the moment, is duplicating the whole directive and modifying the link function to allow for a second attribute to be watched that would determine if animation is used or not.
AFAIK, the angular animation is based on CSS transition, so you could disable animations by add some CSS properties to the element.
May be define a noanimate class like this:
.noanimate {
transition: none !important;
}
then you could add/remove the noanimate class to the element when you want to disable/enable the animation.
Hope this helps.
I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker:
http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa
I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space.
Any idea?
I have found a solution. Here is an updated plunker:
http://plnkr.co/edit/oswSGYApFj9sSohms0FS?p=preview
The key is to override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'.
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