I am trying to create a directive that will animate the height of the element.
The problem is that i am calculating the height of the element based on the data, so i can't create in advance a class that i will add with animate.
I need to add the height property with a different value each time
this is my current directive:
.directive('graph', ['$document', '$animate', function ($document, $animate) {
return {
restrict: 'A',
link: function (scope, element, attributes) {
var newClass = {height: attributes['height']}
$animate.addClass(element, newClass);
}
};
}]);
but this won't work. what should be the solution?
what if i will use instead:
element.css({height: newClass});
this will work but then why do i have the $animate service if i can do it as simple as this?
try this:
jQuery(element).animate({height: "-=" + value + "px"}, function() {...});
Related
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
I'm new to protractor and I want to check some css properties. I'm doing it like this (CoffeeScript):
element.all(By.css(".my-picture")).then (pictures) ->
for picture in pictures
picture.getCssValue("border-radius").then (value) ->
console.log value
The above code does not print anything. I can get properties like "display" or "color", but no "border-radius".
According to this documentation, it seems that getCssValue just works with CSS2 specification. And according to CSS2Properties doc, border-radius does not exists!
Now, I realize that border-radius is a CSS3 property. But the question remains, how can I test it using protractor?
element.all(by.css('.my-picture')).then(function (pictures) {
for (picture in pictures) {
browser.executeScript(function (domPicture) {
var style = window.getComputedStyle(domPicture);
return style.getPropertyValue('border-radius');
}, picture.getWebElement()).then(function (borderRadius) {
console.log(borderRadius);
});
}
});
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
The angular directives ng-show and ng-hide don't preserve layout.
and bootstrap classes don't either
<div class="show">...</div>
<div class="hidden">...</div>
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
ng-hide and ng-show uses display:none
You need to add new property in CSS for visibility : hidden
.element-hidden{
visibility: hidden;
}
And then provide the condition to ng directive - ng-class
e.g.
ng-class="{element-hidden : hideBox == true}"
where hideBox == true is the condition you want to check..
You're looking for the CSS visibility attribute which makes an item invisible, but still allows the element to take up space on the DOM. There's no built-in Angular directive which will do this so you'll need to roll your own.
myApp.directive("visiblityOn", function(){
return{
restrict: "A",
link: function(scope, element){
scope.$watch('visibilityFlag', function(){
element[0].style.visibility = scope.visibilityFlag ? "visible" : "hidden";
});
}
}
});
and a corresponding controller that will work with your directive:
myApp.controller("myController", function($scope){
$scope.visibilityFlag = true;
$scope.changeVisibility = function(){
$scope.visibilityFlag = !$scope.visibilityFlag;
};
});
Example
#RahulPatil's answer is correct but somewhat inelegant. I would suggest to keep using ng-show/ng-hide because it's easier and more readable (i.e. keeps using the same pattern), and add an override in CSS for you particular items:
.keepInFlow.ng-hide {
dislpay: block!important;
visibility: hidden;
}
<div class="keepInFlow" ng-show="show">..</div>
Angular's documentation also mentions overriding ng-hide
I'm trying to resize a div with a background image (left) and a variable height description (right), but can't get it to work. Here's the fiddle
. I tried several things with/without zepto/jQuery/document.getElementById ... nothing works.
.directive('resize', function () {
return {
restrict: 'A',
scope: {},
link: function(scope, elem, attrs) {
elem.height(400);
}
};
})
You can use jQuery:
jQuery(elem).height(400);
Fiddle
Not too ideal though :(
If you don't use jQuery, AngularJS implements only a lite version of the framework, jqLite, which doesn't have a height() method. You can see the documentation for the list of the available functions in jqLite.
In your case, for instance, you can simply do:
element.css('height', '400px');
Fiddle
Notice that, as pointed out in the comment, your fiddle wasn't functional. I've corrected that problem.
How to add, remove and change css classes for an ember element based on the value from the contentBinding while doing ember each?
Doing something like below in didInsertElement, but by the time have added the css classes, based on content value from controller, view element is attached to the view and hence css doesn't get applied.
Is there any other way that we could perform this while view element is getting rendered?
didInsertElement: function() {
this._super();
var personStr= this.get("content").person;
if(personStr==1){
this.$("img").addClass("add-person");
this.$("img").removeClass("view-person");
this.$("img").removeClass("edit-person");
}
}
You could use a Ember.CollectionView and specify your classes which depend on the content in classNameBindings. See API documentation, section HTML class Attribute.
See an example here http://jsfiddle.net/pangratz666/b4xGP/:
Ember.CollectionView.create({
content: [{name: 'Brunö'}, {name: 'Alfred'}, {name: 'Hansi'}],
itemViewClass: Ember.View.extend({
templateName: 'item',
classNameBindings: 'beginsWithA'.w(),
beginsWithA: function() {
var name = this.getPath('content.name');
if (!Ember.empty(name)) {
return name.indexOf('A') === 0;
}
}.property('content.name')
})
}).append();