Im trying to figure out how to make this work on IE:
<div ng-if="result.is_mesurable==true" style="left:{{ (result.user_score * 20)-10}}%" class="test-box">
The code basically generates a dynamic table, and the left position of the object is taken from the user_score value.
I know that IE doesn't read this declaration properly, i had a similar bug in the past:
AngularJS weird render issue
"Because {{xxx.xxx}} is invalid css it is trucated by IE and when the angular compiler scans all attributes, the style attribute is empty."
I know there must be a similar solution, but so far i've been unable to figure it out.
Thx in advance.
also, just to note, the result on IE is an empty style attr.
The issue is the same, solvable with ng-style or ng-attr-style:
ng-style:
<div ng-style="{left: ((result.user_score * 20) - 10) + '%'}" class="test-box" ng-if="result.is_mesurable==true">
ng-attr-*
<div ng-attr-style="left:{{ (result.user_score * 20)-10}}%" class="test-box" ng-if="result.is_mesurable==true" >
Related
I am getting above error in my react project when chrome version is updated to 74 (latest version).
The root cause of this issue is described here. Essentially this happens when you pass style property of some elemnt as string or array. Like style="string" or style={[array]}. This may seem not relevant (I don't think that someone intentionally try to send string or Array to style property), but in my case this was root cause.
To find error I recommend to carefully investigate your code with debugger in Chrome or other browser.
Below is example of my error
I erroniously set styles.radioButton (which is used as value for style property for some element) using spread operator ...spacing.xxSmall, but spacing.xxSmall is just a string and spreaded to array with chars as array members. Previously properties with indexes (0, 1, 2, ...) of style has been ignored, but now site is crushed.
I work with Angular libraries and some of them does not support inline styles now (for me it was ngx-avatar and it not working on Firefox and chrome: 74)
before:
<ngx-avatar style="border-radius="50%"></ngx-avatar>
after:
<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>
I think you can try the same for React.
In my RN Expo Web application I was getting this error while doing something like
style={{ padding: 5, ...props.style }}
I Realized that passing prop named "style" and then using it as inline style was causing this error. What resolved it for me was using a different name for the prop and doing something like ...
style={{ padding: 5, ...props.listSectionStyle }}
Merely changing prop name from 'style' to anything else like 'listSectionStyle' (or any of your choice) should resolve if it is due to above stated reason.
Ref: link shared by Fyodor in his reply helped understand the real issue.
I was getting this error with prime ng's <p-skeleton>. What I was doing is passing a style directly to the skeleton like below:
<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>
So instead of using style directly I used the class property to give the margin bottom (my class was already defined). This removed the error for me. And updated line is as follows:
<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>
For Expo/RN
You're probably giving an array of malformed stylesheets this way:
<compo style={[foo, biz, bar]} />
What you need to do is flatten your stylesheets:
import * as Native from 'react-native';
<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />
I am using TinyCME html editor with the angular directive
and I render the output of the editor -which is data-bidden to property "description" in the scope- into a div using ng-html-bind.
<div ng-bind-html="description" ></div>
everything is working fine but I didn't get in the div what I see in the editor
especially when it comes to styling like the background color and text color
here is what I get in the editor
and here is what I get in the div
it sounds like all the styles applied in the editor will eventually be overwritten by the styles in the div context
I don't have any experience in CSS so please excuse my lack of knowledge
What I really want to do is to render the editor output in a div in a way exactly the way it looks in the editor any help?
I have solved the problem the issue comes from that the ng-bind-html strips out all the styling info comes from the editor that's why there is no styling info
to solve the problem we should use angularjs service $sec which tells the ng-bind-html not to strip out anything from the html string
so to use it in the angular expression we should make it as a filter
app.filter('trustAsHtml', ["$sce", function ($sce) { return $sce.trustAsHtml; } ] );
then you can use this filter in the binding expression like the following:
<div ng-bind-html="currentModel.description | trustAsHtml" ></div>
I'm having trouble getting my CSS styles applied properly to a D3 generated <text> element created within an Angular2 component.
Apparently it was (is?!) possible to use the special CSS selectors * >>> to achieve the desired styling (see http://plnkr.co/edit/Hc56mk07v0GD4W8rVzz1?p=preview for an example) but the same approach doesn't work for me. (I'm on RC4 and D3 4.1)
The element does have the proper class attribute set class="label-text" but no styling is applied despite * >>> .label-text { ... } definition in the referenced CSS file.
Can someone shed some light on this, do we have to deactivated the viewencapsulation or is there another way?
I haven't had any issues with the * >>> selectors when i have done something with d3.js, maybe you just have a typo somewhere.
Here is plunker with angular RC4 and D3.js v4.2 with some text created with d3 and css applied to it with * >>> selector. http://plnkr.co/edit/Nkv5S5DGHmWTiMoxBcgU?p=preview
Ok, after a lot of debugging I finally figured out what the problem is.
I'm accessing the svg element via:
this.htmlElement = this.element.nativeElement;
this.host = d3.select(this.element.nativeElement);
this.svg = this.host.append('svg');
For some reason the * >>> doesn't work here.
If however I adjust the css file to
:host .label-text {
...
}
it works just fine.
Hope that helps someone else with the same problem...
I wanted to compare performance of rendering Angular 2 variable binding [innerText]/{{}} with binding variable as content of pseudo-class(because methods above forces element re rendering)
However, I struggle trying to make angular markup work with css.
That works
CSS:
.my-el:after {
content: attr(my-attr);
}
HTML
<div class="my-el" my-attr="text"></div>
But after change it to my-attr="{{myVar}}" Angular throws error:
browser_adapter.js:77 EXCEPTION: Template parse errors(...)
So I red that I should use attr.my-attr="{{myVar}}"
But after changing CSS to
.my-el:after {
content: attr(attr.my-attr);
}
it doesn't work (I guess dot isn't valid symbol here?).
I know that all above may have not much sense, however I'm finding it as interesting problem which I can't solve so far.
Any ideas how to make these two work together? Thanks in advance!
You will have to bind your value with the following way
<div class="my-el" [attr.my-attr]="myVar"></div>
This way angular will attach the myVar contents to the my-attr attribute
If you need to prepend it with data- use
<div class="my-el" [attr.data-my-attr]="myVar"></div>
Then you can access the value from your css with
attr(my-attr) or attr(data-my-attr)
I am trying to apply a gradient to an element using angular but failing to do so with ngStyle.
Here is an example of what I try to achieve:
http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/
Old link, not working anymore http://run.plnkr.co/maDs3PSWw4Y5tDfb/
In the example I am using the plain style="{{css}}", which is not the recommended approach as described in the documentation (short version, step 5). It will not render in IE <= 11.
If I try to use ng-style="css" and set up like this:
$scope.css = {
background: '-webkit-linear-gradient(' + gradient + ')',
background: '-moz-linear-gradient(' + gradient + ')'
…
}
You'll see the obvious problem, the css object can just contain one instance of background.
I cannot think of many instances where I'd have to browser-prefix like this. Does AngularJS address this in any way or is there a IE <= 11 solution?
It's an interesting question and I don't think a solution exists at the moment, though seeing as gradients didn't exist prior to IE 10 there may be a work around:
For IE 10, 9 & 8 you can use this as no conflicts exist.
$scope.css = {
'-ms-filter' : "progid:DXImageTransform.Microsoft.gradient ("+iegradient+")",
'background' : "linear-gradient("+gradient+")"
};
while style="{{css}}" will do for all other modern browsers( ie. include both style and ng-style).
Note: I'm assuming that style={{}} will fail silently in < IE11
If this doesn't work for you, you could always create a directive specifically for background gradients. Let me know if you need help with that in the comments.