Better than few words, here is the code which doesn't work on IE.
<div ng-repeat="favcolor in favcolors" class="favorite" alt="{{favcolor.name}}" title="{{favcolor.name}}" style="background:#{{favcolor.hexa}}">{{favcolor.hexa}}</div>
The css :
.favorite{
width: 50px;
height: 20px;
display: inline-block;
border: 1px solid black;
}
Everything is ok on other browsers, but on IE my boxes doesn't have any background color. When I replace {{favcolor.hexa}} with some hexa, it works fine...
Thx.
Try to use ng-style.
<div ng-style="{ 'background' : '#' + favcolor.hexa }" ... >
Related
I used Styled-components in my React.js app. I want to make some area blur on mouse hover action. So I tried to use &:hover and all line works fine in &:hover area except backdrop effect.
How to make blur effect (on mouse over) in styled-components?
My code
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
backdrop-filter: blur(2px); // This line doesn't work
-webkit-backdrop-filter: blur(2px); // This line doesn't work
cursor: pointer;
border: 1px solid red;
}
`
But when I try in normal HTML (such as w3schools.com/"Try it yourself"), it works well.
<!DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 300px;
height: 60px;
position: absolute;
top: 150px;
left: 50px;
}
#aaa:hover {
cursor: pointer;
backdrop-filter: blur(5px);
border: 1px solid red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<div id="aaa">bbbbbbb</div>
</body>
</html>
Edited
I want to get this effect like above image.
I don't want the text inside the div to blur. filter gives a blur effect to the text itself in the div. I just want to give blur effect to the letters behind div when mouse hover. So I want to use backdrop-filter.
Only when I use styled-components, it doesn't work. I am still curious why. What's wrong in my code?
It seems like the css entities backdrop-filter and -webkit.backdrop-filter are not what you have described in your image.
Backdrop-filter applies to the elements behind the target node, while filter applies to the node itself. In order to look like the image you added, the styled component would be:
const Adiv = styled.div`
width: 300px;
height: 60px;
background: #ffa5;
&:hover {
webkit-filter: blur(2px);
filter: blur(2px);
cursor: pointer;
border: 1px solid red;
}
`
The results looks like this.
When I add the filter property on a PrimeNg (7.x) p-tree it works as expected but I have a double scroll bar.
The implementation is not special
<div class="row" *ngIf="formControls.wantThemes.value">
<div class="col-4 app-notif-edit-label"></div>
<div class="col-4 app-notif-edit-content">
<h4>Themes</h4>
<p-tree
[filter]="true"
class="app-notif-p-tree"
[value]="cmtyThemesTreeNodes"
[(selection)]="selectedCmtyThemesTreeNodes"
selectionMode="checkbox"
(onNodeSelect)="nodeSelectThemes($event)"
(onNodeUnselect)="nodeSelectThemes($event)"
>
</p-tree>
</div>
</div>
I have applied the following css to limit the size of the box
.app-notif-p-tree .ui-tree {
color: $sinapseBlue;
display: block;
font-size: medium;
height: 100%;
margin: 2% auto;
max-height: 250px;
min-height: 250px;
overflow: auto;
white-space: nowrap;
width: 97%; }
If I change the overflow to hidden, I don't see the last element of my list.
Any idea why? Thanks
I have added .app-notif-p-tree .ui-tree .ui-tree-container { height: 80%; }
I have created a feature in my application wherein one can copy contents of an existing invoice to create a fresh new invoice. All other fields are getting copied. But the field 'note to customer' isn't getting displayed somehow. I've used text angular for adding a 'note to customer'.
<div layout="row" flex>
<div flex-xl="" ng-if="documentEntity.noteToCustomer"
ng-click="noteToCustomer($event,documentEntity.noteToCustomer)"
style="border: 1px solid rgba(0, 0, 0, 0.12); background-color: #fdf7f7; padding: 15px; border-width: 2 0 1px; line-height: 26px; width: 100%; box-sizing: border-box; float: left;"
class="flex-xl" ><span ng-bind-html="documentEntity.noteToCustomer"></span></div>
</div>
What might be the issue here?
text angular directive is missing in above
<div text-angular flex-xl="" ng-if="documentEntity.noteToCustomer" ....>...</div>
add a plunker for clear understanding..
In the documentarion of textangular, something is said about using ng-bind-html. Try using ta-bing instead.
I am devolping app using angular js and ionic framework. I want to show border right only for odd numbers.
Here is my code:
<div class="media-body" style="padding-bottom:25px;">
<h2 class="align_center">{{services.name}}</h2>
<a href="#job/{{services.id}}">
<h2 class="align_center_des">{{services.description}}</h2>
</div>
</div></div>
Here is the Css
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
border-right: 1px solid #E4E4E4;
margin-bottom: 31px;
height: 144px;
}
Here is fiddle:
https://jsfiddle.net/asetkL0n/
CSS also allows you to target specific odd or even elements. An example to that could be:
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
margin-bottom: 31px;
height: 144px;
}
.col-32-custom:nth-child(odd) {
border-right: 1px solid #E4E4E4;
}
wherein, inside that nth-child, you can pass, "odd","even","2n","2n+1", or any expression in n.
I think the best solution is to use ng-class, so you have to create a class that will only add the border right.
I presume you are in an ng-repeat loop so the code will look like
<div data-ng-class="{border-right: ($index%2)===0}" class="col-32-custom">
Here you have the condition for the even number ($index%2)===0 so the div will have border-right class on event number.
you can use ng-class-odd / ng-class-even within ng-repeat to add specific classes to this items.
example here : ng-class-odd
When we have multiple charts (using highcharts) on the same page and we want to make it inside a loop. Doesn't work.
Classic case (it works properly):
<div ng-attr-id="container1"
style="min-width: 400px; height: 400px; max-width: 200px; margin: 0 auto"></div>
<div id="container2"
style="min-width: 400px; height: 400px; max-width: 200px; margin: 0 auto"></div>
Specific case: in a loop
<div ng-repeat-n="2">
<div ng-attr-id="container{{$index+3}}"
style="min-width: 400px; height: 400px; max-width: 200px; margin: 0 auto"></div>
</div>
Example runing.
I found the problem, when I put the highcharts inside the nested views
in my example i choose angular-route-segment
<div app-view-segment="0"></div>
and when i put the highcharts outside the nested view it works correctly.