I'm having trouble with HTMLPurifier removing my style tags. This is the (test) configuration I use:
$config = HTMLPurifier_Config::createDefault();
$config->set('Core.Encoding', 'UTF-8'); // replace with your encoding
$config->set('HTML.Doctype', 'HTML 4.01 Transitional'); // replace with your doctype
$config->set('Cache.DefinitionImpl', null);
$config->set('HTML.AllowedElements','div');
$config->set('HTML.AllowedAttributes', "*.style");
$config->set('CSS.AllowedProperties', 'background-color');
And when I filter this HTML:
<div style="background-color: #fff;">test</div>
<div style="border: 1px solid #000;">test</div>
This is what I get:
<div>test</div>
<div style="border:;">test</div>
I don't understand why the border attribute is left (but it's value is stripped), and why the background-color attribute is removed. How do I configure so that those style tags are allowed through the filter? Also, I want to allow any style values for the style attributes that I allow.
Try this:
$config = HTMLPurifier_Config::createDefault();
$config->set('Core.Encoding', 'UTF-8'); // replace with your encoding
$config->set('HTML.Doctype', 'HTML 4.01 Transitional');
$config->set('CSS.Trusted', 'HTML 4.01 Transitional'); // allow any css
$config->set('HTML.Allowed','div[style]');
$config->set('CSS.AllowedProperties', 'background-color');
This works for me!
Related
I want to use ng-tags-input in my project.
I try to set diffrent color for each tag according to color property object in array.
Here is plunker I am working on.
For this purpose I need to override tag-item css class in ng-input template.
Here is the example of ng-input template:
<script type="text/ng-template" id="tag-template">
<div class="tags-input" ng-style="{background: data.color}">
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
in this row I try to override tags-input css class:
<div class="tags-input" ng-style="{background: data.color}">
And here is result I get:
as you can see on left and right edges not colored.
Any idea what I am doing wrong?And how to override the tags-input css class??
If you look at the markup, you'll see that the .tags-input div where you apply your background color style is embedded into an li element, which has a laft and right padding of 5px. That's why the color is not applied on the full width of the button.
So, make sure to apply your own stylesheet after the ng-tags-input stylesheet, and override some CSS rules in order for the lito have no padding, and for the div with the background color to have a padding instead:
/* override default tag styles for colors to look less ugly */
tags-input .tags .tag-item {
padding: 0;
height: 27px;
}
.tags-input {
padding: 0 5px;
border-radius: 2px;
}
Here's your plunkr modified to make that happen.
I have a html page with this code
<p id="roonnameDiv" >{{chatRoom}}</p>
and an app.js with the following code . It reflects the value corrrectly but if I try to style it with color at runtime it doesnt not reflect on the html page
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};
I even tried using ng-color but in vain . Have head using html-unsafe tags t add html5 code to angular variables at runtime , perhaps I could use that to provide style of element but could not find any examples .
Essentially the requirement is of having various styled ( color ,size and fonts ) in roonnameDiv using angular framework
..................Edit .............................
I used the ngstyle as suggested by answers below
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.myStyle = {color: "green"};
however the output text was just plain grey . On exploring it thorugh chorome inspector , I found it is inheriting some styles through body.
Switching off the body color tag just turns the text black instead of green .
Following is the body
<body ng-app="xyz" ng-controller="AppController" class="ng-scope">
This is the body style
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
I want specific style class to apply for different text components without affetcting the overall body style . Could you suggest how to do so ?
You can use ng-style directive.
In Markup
<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>
In controller
$scope.myStyle = {color: "green", background: "blue"} // Write all the required styles here.
More on ng-style directive at: https://docs.angularjs.org/api/ng/directive/ngStyle
try this
<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>
I have HTML like this:
<div id="top"
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
// Body HTML here. No images are loaded. Just Divs
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/angular.js"></script>
Now the page briefly shows {{ app.userService.data.name }}.
If I want this to not show then do I have to have AngularJS in the head of my document? The reason I placed AngularJS at the end was because I wanted to have the page appear as quickly as possible.
Can someone advise me about this and also tell me how I can make the {{ xxx }} hidden when the page first loads up.
You could use ng-cloak to hide any elements until it get compiled.
<div id="top" ng-cloak
ng-hide="app.stateService.displayModal">
<div>{{ app.userService.data.name }}</div>
</div>
The CSS rules to hide the elements with ng-cloak will be added automatically by angular.js.
If that isn't fast enough you could add the css rules yourself at the head:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Or using the angular-csp.css file.
Also see: ngCloak documentation
you can do it in two ways -
ng-bind
OR
ng-cloak
{{ app.userService.data.name }}
Either way, you {{}} won't show up. no need to put angular.js inside head.
This is the role of the ng-cloak directive used as a css class.
Check doc: https://docs.angularjs.org/api/ng/directive/ngCloak
You better use ng-bind
<span ng-bind="app.userService.data.name"></span>
instead of {{app.userService.data.name}}.
This will avoid that flickering.
I want to hide a text message while the js is loading and data binding is not yet applied. I have tried something like this but its always hiding the message
.hide { display: none; }
<div class="hide" ng-hide="haveRecords">No Records found</div>
If I remove the class hide from div. then this element is shown for some milli-seconds before the data binding is applied. How to fix it?
This is what ngCloak is for.
You can use it like this:
<head>
...
<style>[ng-cloak] {display: none !important;}</style>
</head>
<body>
...
<div ng-cloak ng-hide="haveRecords">No Records found</div>
NOTE: The style in the head is only required if you include the AngularJS script at the end of body (which is a good idea anyway).
You should use ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
Code
<div ng-hide="haveRecords" ng-cloak>No Records found</div>
I'm trying to get a div container with some text to fade in after the page loaded, but I fail. I was using the ng-animate directive like this:
<div class="motd" style="text-align: center;" ng-init="quote = getQuote();">
<div class="slide-fade" ng-class="animation">
<span class="quote"><i>{{quote.content}}</i></span><br><br>
<span class="author">{{quote.author}}</span>
</div>
</div>
Which obviously does not work, due to the fact that the animation does not get triggered by a click or something like that.
So how do I tell the browser that after the page loaded, it should fade in my text?
I hope you can help me!
Edit: At the date where I asked, I did not know that animations will also trigger when the page has loaded. I always thought there have to be some "user interaction" like a click or something to trigger them.
If you're using bootstrap, you can do this:
<html ng-app="myApp" ng-strict-di>
<head>...</head>
<body ng-init="ngLoaded = true" class="fade" ng-class="{ in: ngLoaded }">
<div>Content</div>
</body>
</html>
It may also work do to it this way as well:
<body
ng-app="myApp"
ng-strict-di
ng-init="ngLoaded = true"
class="fade"
ng-class="{ in: ngLoaded }">
<div> Content </div>
</body>
The fade class has 0 opacity and the in class applies the transition. ngLoaded will become true (in the $rootScope, I believe) as soon as angular has loaded due to ng-init="ngLoaded = true".
I use this so that the page doesn't blip with bits of angular brackets and such while the page loads.
I don't see the problem.
You just want to have animation when the element appears( you can think about it that way right? ).
Basicaly what I would do.
I would use then animate.css
http://daneden.github.io/animate.css/
and I would just add:
class="animated fadeIn"
Or plain css with this animation.
What I like to do is to use delay
.delayedx1{
animation-delay: 0.2s !important;
-webkit-animation-delay: 0.2s !important;
-moz-animation-delay: 0.2s !important;
-o-animation-delay: 0.2s !important;
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
x2 x3 x4 or in ng repeat delay directly in "style" based on $index.
One way to do this is to use a flag (like $scope.fade = false;) to indicate that the page has loaded. Then, on your element, you'd use an ng-class with a conditional e.g.
class="animation" ng-class="{'fade-in': fade }"
The actual fade would be handled by CSS.
.animation { opacity:0; transition:all 200ms ease-in-out; }
.animation.fade-in { opacity:1; }
In your case, the fade-in condition could be as simple as ng-class="{'fade-in': quote }" since any truthy value you cause the class to get applied.
Here's a working plunker for you to play around with: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview