I've a div with the Angular ng-click directive attached to it. On hovering over this element the mouse pointer doesn't change. Is there a way to change it through CSS? I know I can simply attach an anchor tag to it, but I would like to know if this can be done.
Is there a way to change it through css?
Yes, see cursor.
If you just wanted to target elements with the ng-click attribute, for example:
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
All you have to do is use the cursor property
<div data-ng-click="myFun()" class="pointer"></div>
.pointer {
cursor: pointer;
}
Can be done via css, just add:
.yourClass { cursor: pointer; }
To your stylesheet
If you are using datatables, you have to override the default datatables.css settings and add the following code to custom CSS, In the code below row-select is the class that I added on datatables in my HTML page.
table.row-select.dataTable tbody td
{
cursor: pointer;
}
Yes you can achieve it simply through CSS, nothing special about AngularJS here.
<div ng-click="myAngularFunctionWithinController()" style="cursor: hand;cursor: pointer;">
</div>
Related
I'm having two div's which are having same css, only difference is the style is having display:block and none.
<div class="autocomplete-suggestions " style="left: 91px; top: 333px; min-width: 747px; display: none;">
<div>item1</div>
<div>item2</div>
</div>
<div class="autocomplete-suggestions " style="left: 91px; top: 333px; min-width: 747px; display: block;">
<div>item3</div>
<div>item4</div>
</div>
How we could identify the which element is having the style display block or none in Protractor?
I need to click item3 div which is reside with display:block div.
I have tried the below code.
browser.findElements(by.css('.autocomplete-suggestions')).then((autoSuggestions) => {
autoSuggestions.map((item) => {
if (item.isDisplayed()) {
item.getTagName().then((x) => {
console.log('tagname', x);
});
browser.pause();
//item[index].click();
}
})
from the above code i can see both div's.
I'm receiving 'could not find element 'click on undefined' error.
I'm trying end to end testing with Anuglar 7, protractor, jasmine and selenium web driver.
You need to filter your expression to take into consideration the style attribute.
You might find XPath selector easier to write/read/understand, you can use XPath contains() function to select only div which has display: block in the style attribute would be:
//div[contains(#class,'autocomplete-suggestions') and contains(#style, 'display: block')]/div[1]
Demo:
If you would like to stay with CSS selectors the equivalent expression will be:
div[class*="autocomplete-suggestions"][style *= "display: block"] >:nth-child(1)
If you're looking for an option using CSS as locator then you can use this
element(by.cssContainingText(".autocomplete-suggestions[style*='display: block'] div", "item3"))
According to md-tab Documentation we can have custom md-tab-label, which I'm trying to do like this:
<md-tab-label class="my-label">
Label
</md-tab-label>
My css:
.my-label{
background: #40FF00;
}
However, the background color is not appearing for tab labels.
Am I doing something wrong ?
So, I was doing this the wrong way.
The correct way is:
Define your markup
Then add css
In this case, the css can be like:
all-tabs {font-size: 20px;}
.demo-tab {
color:green;
}
and in html:
<md-tab-label>
<all-tabs class="demo-tab"> {{$index+1}} </all-tabs>
</md-tab-label>
Resulting tabs:
I'm using Foundation in a mobile first project where many elements are hidden based on the browser size, and I'm running into some trouble using Foundation's visibility classes like .show-for-small-only as Foundation applies
display: inherit !important;
to any element which uses these visibility classes. (For example, see line 5808)...
.show-for-small-only {
display:inherit !important;
}
This is causing me issues. Say have an element that I want to .show-for-small-only:
<div class="someElem show-for-small-only">
<!-- Content -->
</div>
Yet I want this element, when shown, to be formatted as a display:inline-block element. Due to Foundation's use of !important, the div is forced to assume it's default display state of block.
Is there any workaround to this, short of declaring my styling as !important too? (I don't want to have to do that though)...
I agree, using !important always feels gross.
Precedence in CSS is given to the element furthest down the tree so to override the Foundation !important property, just target an element further down the tree, like so:
<div class="show-for-small-only">
<div class="someElm">
<!-- your content here -->
</div>
</div>
With the following CSS
.someElm {
display: inline-block;
}
Here's a Plunker for kicks (just remember the items wont show up unless the screen is small).
I hope this helps.
To overwrite inportant just declare it again after the first declaration
.show-for-small-only {
display:inherit !important;
}
.show-for-small-only {
display: inline-block!important;
}
<div class="someElem show-for-small-only">
Content
</div>
I want multiple css changes need to be done while clicking button
for ex: ng-click="myStyle={'background-color':'black'}; myStyle={color:'blue'}"
I think you have to do similar.
<span ng-click="elemStyle={'background-color': '#000', 'color': blue}"
ng-style="elemStyle">some text</span>
It is more advisable (for your own sake) to assign different classes to the element depending on the needs rather than just plain CSS.
Please see AngularJS ng-class directive for that functionality.
In this example element will toggle between having foo and bar class when clicked:
<div
data-ng-click="toggleClass = !toggleClass"
data-ng-class="{foo: toggleClass, bar: !toggleClass}">
</div>
http://jsfiddle.net/hpeinar/oLak27xx/
I have a div element that I only want to be show when my list of items empty. So I put in the following(in haml):
#no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }
However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
Any ideas what I am doing wrong?
You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.
<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
Some text
</div>
</div>
Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.
This should be all you need to do:
<div ng-hide="items.length" ng-cloak>no items</div>
Sample fiddle.
None of the solutions worked for me. The only solution I found is the following:
In each controller, add:
$scope.$on('$viewContentLoaded', function () {
$scope.completed = true;
});
and in the html of each view , add ng-if="completed" to the topmost element. For example:
<div ng-if="completed">
Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.
There's currently an open issue for this:
https://github.com/angular/angular.js/issues/14015
This workaround worked for me:
.ng-hide.ng-hide-animate {
display: none !important;
}