I want to allow <style> tags in the <body> that reference the body like:
<style>
body{
background-color:pink
}
</style>
Filter.ExtractStyleBlocks can be used to throw <style> into <head>, but styles on body get removed.
The ideal answer simply adds body to the existing list of allowed CSS selectors, rather than requiring a complete list of allowed CSS selectors. Or, the ideal answer may explain why this request is impossible.
Related
I am not sure this issue is related directly to brunch, but it's the first time I use this framework and first time I see something like this ...
I am trying out brunch/with-react skeleton and there is a little issue with my DOM elements.
I changed my body's background color as follow, in app/styles/application.css
body {
background-color: #cfcfcf
}
Here is the result
DOM rendering
I am using Chrome so I went ahead and inspected every elements.
I cannot find any element responsible for this behavior.
Your html pages says:
<link rel="stylesheet" type="text/css" href="/app.css">
But your css filename is application.css
By default, the search label is padded to left.. i.e., padding-left: 3px is assigned by Angular-material.min.css
When I pad it to right by customizing the same in my custom.less file, it's not taken high priority over the default css from Angular-material.min.css
Load your CSS in the proper order.
HTML
<head>
<link rel="stylesheet" type="text/css" href="Angular-material.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
This is because the C in CSS stands for Cascading. This means that rules that are seen later on overwrite rules that were seen previously.
Had the same issue, see bellow for solution.
on you angular.json file, under your styles, make sure you use your custom style file as the last one
"styles":
[
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/custom-theme.scss"
],
Try adding !important to your css style property:
padding-left: 29px !important;
What if we use ng-cloak, but the angular script is loading slowly, or if the user has turned off JavaScript, then wouldn't the user still see {{ a + b }} or anything we wanted to hide?
Would it be a good practice then, if we add
<style>
[ng-cloak] { display: none !important }
</style>
to our HTML file's header section? Or would there be other CSS style that might be appropriate to add if we are using AngularJS and the Internet connection might be slow or if the user has turned off JavaScript?
If you are loading angular.js in the head section of your page, then you should not have to add any css yourself for ng-cloak to work properly. Angular adds these styles itself when it loads, and since this happens in the head section, these styles are applied before the browser evaluates the body of your page and renders any content.
However, if you are loading angular asynchronously with a script loader, then you do need to add the styles manually (preferably in a stylesheet or style block loaded in the head of your page).
From the docs:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I'm not totally sure I understand the question, but yes, I believe what you are saying makes sense.
ng-cloak is a bit different from other directives, because its only job is to remove itself. Angular does not apply any special styling to that attribute. It just removes it.
That means, for example, you could apply styling to make unloaded Angular elements have a background color, instead of being invisible. I don't know why you'd do that, but that's something to remember--it's just a boring old attribute until Angular removes it.
Behavior of loading CSS files is up to the browser, so it's probably fair to put a style tag in the head, but that's just like any other CSS resources--you rarely want elements loading without styles, and browsers are pretty good about avoiding that. I often like to put it in the head just for good measure, but I can understand someone not wanting to do that. But you definitely need it somewhere.
If you have JavaScript disabled, or before Angular loads, it's just like any other attribute:
[ng-cloak]{
display: none
}
<div ng-cloak>
Where am I?
</div>
But once Angular loads (no matter how long it takes to set up, simulated here by a one-second timer):
window.setTimeout(function() {
$("[ng-cloak]").removeAttr("ng-cloak");
}, 1000);
[ng-cloak] {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-cloak>
Here I am!
</div>
We have an AngularJS app (not a SPA). We face this problem where some part of uncompiled template is displayed for brief moments, so I am applying ngCloak directive to the app.
I'm not sure of where exactly should this directive be used - every single, small element or large sections (or somewhere else). What I'm currently doing is throttling connection via Chrome dev tools to a very slow speed and then checking which parts of template show up in raw state. But I feel this is not a very deterministic approach.
So I would like to know the where exactly to use ngCloak.
Thank You.
Applying ngCloak to every small element is certainly the wrong way to go.
You would typically want to apply it either to large sections, or to the entire portion of your page that uses Angular. The objective is to hide these parts of the page until Angular is ready to use.
This is what the official documentation says:
The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
If you don't want your users to be looking at blank space, you can show a loading animation until Angular finishes loading. You can do this by giving the element an ng-show="false" directive:
<img src='/images/loading.gif' ng-show='false' />
Please add following code into head section of index.html
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
And you can add same code into your css file
Thanks
Without [ng-cloak] when you run your application before angularJs rendering you will see some angular codes like "{{myngModel}} or something like this, when you put [ng-cloak] in your project on run you didn't see those codes until rendering complete .
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>app</title>
</head>
<body ng-cloak>
</body>
</html>
Hi I am allowing users to specify whether they want to print reports in a landscape or portrait format.
I was wondering if it's possible to add this (see below) into the head of the web document using a angularjs directive? That way it will change the printing size depending on the user input.
<style>#media print{#page {size: landscape}}</style>
This depends on whether you are going to be using this functionality in many different places. If you only need it once, then a directive may be overkill.
You can simply put
<style> #media print {#page { size: {{ orientation }} } }</style>
within your angular controller, and specify orientation on the $scope.
To my knowledge there is no need for the style tag to be in the head.
You can use the ngStyle directive to conditionally apply css. See AngularJS ngStyle. The example at the end of the link shows how to do that.
I had to crate custom stylesheet on the fly with unique IDs, I made it nicely work with angularJS like this :
<style type="text/css"
ng-bind="vm.css">
</style>
(note the use of ng-bind)
where vm.css looks like that in the controller
vm.css = `#${$scope.id} { background-color: red; }`
Hope this helps!