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);
});
}
});
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
and if a link is underlined, i want it to get rid of the underline on hover. If a link has no underline, i want it to get one on hover.
Is there a smart way to do this with SASS rather than hard coding it for every link?
As others have stated, to do this within CSS or SASS this is something that requires a default style for links and a class or data attribute that must be applied to alternative links.
The type of auto-smart styling is possible with javascript though if that's an acceptable alternative. I made a quick jQuery Fiddle that would work by checking all links for the text-decoration style. This has performance drawbacks due to scanning the DOM for all links every page load. It also breaks the law of keeping styling with the CSS realm so it's up to you if it's worth it.
var links = $('a');
links.each(function (i) {
var $this = $(this);
// if this has underline
if ($this.css('text-decoration') == 'underline') {
$this.hover(
function() {
$this.css('text-decoration', 'none');
}, function() {
$this.css('text-decoration', 'underline');
});
} else {
$this.hover(
function() {
$this.css('text-decoration', 'underline');
}, function() {
$this.css('text-decoration', 'none');
});
};
});
https://jsfiddle.net/ym8s6Lwh/
Looking to use this cross browser grayscale filter and had it working on all images, but I want to restrict the effect to the images within a single div.
In function.js I changed all instances of the selector from grayscale($('img'));
to grayscale($('#grayscale-div img')); and did so in all instances. It's adding the CSS class, but in IE11 the effect doesn't work anymore.
I'm trying to see if this is a mistake I'm making with the jQuery selector. Thanks for in advance for pointing me in the right direction.
Code Excerpt:
if (getInternetExplorerVersion() >= 10){
$('#grayscale-div img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscaleIE10(this.src);
});
// Quick animation on IE10+
$('#grayscale-div img').hover(
function () {
$(this).parent().find('img:first').stop().animate({opacity:1}, 200);
},
function () {
$('.img_grayscale').stop().animate({opacity:0}, 200);
}
);
The getInternetExplorerVersion() conditional check is failing in IE11. The following change:
if(getInternetExplorerVersion() >= 10 || !!window.MSInputMethodContext)
will fix it in the code shown above. Here are some unrelated questions which explain the problem and the solution:
How to detect IE11?
Detecting IE11 using CSS Capability/Feature Detection
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();