I don't know it can be write like that or not but I am trying to set height
to html item in css style. Height is being passed in context variable from Backend Django.
I am trying this:
<style>
.fc-agendaWeek-view tr {
height: '{{row_height|add:"0"}}'"px"
}
</style>
{{row_height|add:"0"}} => this is context variable passed from Django Backend which is integer i-e 70 , 80.
Where I am wrong? Can we even write like that. Any help will be appreciated.
Your CSS is invalid. It often helps a lot to View Source on a page and see exactly what your template is outputting. In this case, I think you want something more like:
<style>
.fc-agendaWeek-view tr {
height: {{ row_height }}px;
}
</style>
Which will output:
<style>
.fc-agendaWeek-view tr {
height: 70px;
}
</style>
Related
In my vuejs component I have style like this
<style>
.preview-page {
.preview-section {
width: 100%;
}
.logo-section {
text-align: center;
}
}
</style>
Its building fine and showing correct results in browser, but on vscode its showing 2 errors
Do not use empty rulesetscss(emptyRules)
and
} expectedcss(css-rcurlyexpected)
OK, looks like there are two issues being picked up on:
Do not use empty rulesetscss(emptyRules) is a valid complaint, since .preview-page{} contains no styles (although its children do). Add some styles to .preview-page or suppress the warning if it bothers you.
} expectedcss(css-rcurlyexpected) I assume is triggering because you have not defined lang="scss" in your <style> tag. Here is the documentation.
I receive a configuration JSON that has colors and the paths of the images that I must use in my CSS, I correctly set the variables in the html and it would have a result similar to this:
<html lang="en" style="
--c-logo-square:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/temp%20belike%20small.png;
--c-background-image:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png;
--c-primary:green;
--c-secondary:purple;">
I can use the color variables correctly, but I don't know how to use the image paths as background.
// Works
.my-html-component {
color: var(--c-primary);
}
// Error
logo {
background: url(var(--c-background-image));
}
When working with Angular and SCSS I understand that I could use some function that allows me to do what I need, but I don't know how to do it.
Instead of defining url in the attribute, define it as a part of the variable. Dont forget to add :root.
:root {
--c-background-image:url(https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png);
}
.logo {
background: var(--c-background-image);
width:500px;
height:500px;
}
<div class="logo"></div>
How can I add separate CSS for one page in Angular?
This is the CSS I need, as per How to remove the URL from the printing page?:
#media print{
#page{
margin:0;
}
body{
margin:30px;
}
}
But putting CSS into the component with ::ng-deep or ViewEncapsulation.None won't help here, because when navigating away from a page, the CSS of the page isn't deleted.
I've added a Stackblitz, which explains the problem clearly.
I've come up with a potential solution, but it doesn't work:
encapsulation: ViewEncapsulation.None
...
constructor(private renderer: Renderer2) {
this.renderer.addClass(document.body, 'special-print');
}
ngOnDestroy() {
this.renderer.removeClass(document.body, 'special-print');
}
....
....
....
#media print{
#page{
margin:0;
}
body.special-print{
margin:30px;
}
}
Why it doesn't work:
While it would help with <body> CSS, it won't help with #page CSS. Perhaps the question would be better summarized as "How to add global CSS, but remove it when we leave the page?".
Solved!
We print the <style> block directly into the component's HTML, and therefore when the component gets removed, our <style> block gets removed too. (Normally this wouldn't work, but thanks to DomSanitizer.bypassSecurityTrustHtml, Angular won't break our code when running optimizations.)
Here's a StackBlitz.
First, create a new component to handle the work:
component.ts: (This is all we need. We don't need an HTML or style.css file.)
//Inside your local component, place this HTML
//<app-local-css [style]="'body{background:green !important;}'"></app-local-css>
// OR
//<app-local-css [scriptURL]="'/path/to/file.css'"></app-local-css>
#Component({
selector: "app-local-css",
template: '<span style="display:none" [innerHTML]="this.safeString"></span>'
})
export class LocalCSSComponent implements OnInit {
constructor(protected sanitizer: DomSanitizer) {}
#Input() scriptURL?: string;
#Input() style?: string;
safeString: SafeHtml;
ngOnInit() {
if (this.scriptURL) {
let string = '<link rel="stylesheet" type="text/css" href="' + this.scriptURL + '">';
this.safeString = this.sanitizer.bypassSecurityTrustHtml(string);
} else if (this.style) {
let string = '<style type="text/css">' + this.style + "</style>";
this.safeString = this.sanitizer.bypassSecurityTrustHtml(string);
}
}
}
And then use it like this:
mySample.component.html:
<app-local-css [style]="'body{background:green !important;}'"></app-local-css>
// OR
<app-local-css [scriptURL]="'/path/to/file.css'"></app-local-css>
Angular is doing client-side rendering, which is bad news, because you do not have separate pages. You have several possible solutions though:
1. Separate page
You can create another page with or without Angular, which includes the CSS you need and load that page. In the most simplistic approach to achieve this, the other page would have a different URL. If having a different URL is not to your liking, then you could hide your page's content and show the other page inside an iframe. It would admittedly be a hacky solution, but it is a solution.
2. Client-side CSS rendering
Instead of just loading the CSS, you could have a component which would control global CSS rules, matched by your view's name. You would have a template value rendered to a property, like:
#media print{
#page{
margin:0;
}
body{
margin:30px;
}
}
And when you visit the page where this needs to be activated, you would simply initialize a property with a style HTML element that was generated based on the template and added to head. Once you leave the given view, your component would detect that event and would remove() that element. If you choose this solution, then it would be wise to make sure that you are supporting this on more general terms, so that if some new views will have their custom global CSS, then they would be easy to integrate into your project in the future.
3. body classes
You could add/remove some custom-print or whatever class to/from body whenever the style is to be changed. This way you could add the CSS exactly once to your HTML and change the rules accordingly, like:
body.custom-print {
margin: 30px;
}
This would be a neat solution, but the problem in your case is that you have a #page rule as well and I'm not sure how you could make that dependant on body classes or some other HTML attributes. I would conduct quite a few experiments about this if I were you.
4. Iframe staging
You could avoid having that CSS in your main page, but would have a hidden iframe where you would have the CSS and would just copy the content into the CSS and once that's loaded, print that.
Don't change the whole body from apple. Instead, there are a few changes to make.
In the app component, hold a boolean for whether or not you are on apple, and use ngClass for class defined in scss.
Track which route you are on in appComponent, and set isApple accordingly
Add a div around all your html, for container to take full size
Add global html, body setting height to 100% so you see color everywhere
Remove body overriding in apple
so,
appComponent.ts:
isApple: Boolean;
constructor(router: Router) {
router.events.subscribe(v => {
if (v instanceof NavigationEnd) {
this.isApple = v.url === "/apple";
}
});
}
appComponent.html:
<div [ngClass]="{'red':isApple}" class="container">
<p>
There are two components: Apple and Banana. Switching between them will show
the problem.
</p>
<router-outlet></router-outlet>
</div>
appComponent.scss
.red {
background-color: red;
}
.container {
height: 100%;
}
apple.component.scss (remove body)
/*Sample "global" CSS, that affects something outside the current component.*/
::ng-deep {
#media print {
#page {
margin: 0;
}
}
}
styles.scss (global)
html, body {
height: 100%;
}
You can see this altogether at this Stackblitz link
You can add different css files in the component (for instance, app-task.component.ts):
#Component({
selector: 'app-task',
templateUrl: './app-task.component.html',
styleUrls: ['./app-task.component.scss', './styles2.scss', './styles3.scss']
})
In this example, the style files are in the same folder that the component, but this is not the best option: you have to put the files in assets, for example. Also, be careful with the thread of the styles, since the first one you put will be put before the second (obviously).
I'd like to know if there is a way to pass REAL parameters to a CSS class (like we do with Javascript), for example :
In Javascript we are used to write it in this way :
<script language="javascript">
function clWidth(wdt) {
document.getElementById('cell').style.width = wdt;
}
</script language="javascript">
and the input HTML object <input type="text" id="cell"> will have the given width.
Now, to have it in the same way but using CSS classes, I'd try something like this :
<style>
.clWidth(wdt) {
width: wdt;
}
</style>
my HTML objects :
<input type="text" class="clWidth(5)">
<input type="text" class="clWidth(10)">
<input type="text" class="clWidth(5)">
<input type="text" class="clWidth(15)">
The purpouse is to have one single class for all the objects which "width" can be given in the object itself, but I can't find the right syntax to use to have this working for good.
I'm already using the multi-classes definition but I really don't like this method because it is not a "programming" way :
<style>
.clWidth5 { width: 5px; }
.clWidth10 { width: 10px; }
.clWidth15 { width: 15px; }
<style>
I know CSS is not a "programming language" (at least not yet for what I know), but I'd really like to write my code in a better way, using a single CSS class working with real parameters.
If there is a way, please explain me the right syntax to use or else just confirm me that it is not yet supported.
Thank you for any help you can give me to improve my coding.
There is no way to do what you're looking for... Plus, what you want isn't the right way to write css: css is a static language, everything that needs to be dynamic should be achieved in javascript.
In order to achieve that, but statically, is to use a css preprocessor like sass:
#each $width in (5, 10, 15, 20) {
.clWidth-#{$width} { width: #{$width}px; }
}
There is no way to take parameters from html and use them in css.
However, you can simply writing your css code by using a css extension language like sass or less.
For the example you have given, you can write sass/scss code to simplify your code.
SCSS code:
#each $width in (5, 10, 15) {
.clWidth#{$width} {
width: #{$width}px;
}
}
This would compile to in css as:
CSS code:
.clWidth5 {
width: 5px;
}
.clWidth10 {
width: 10px;
}
.clWidth15 {
width: 15px;
}
I am having list of css files and every css file has different image location code written like url(../_images/headerImages.jpg), now I am placing my images to some other domain therefore I want to create a variable like var domainPath = http://sitename.com so that at every url(../) I could write something like url(domainPath+ '/images/headerImages.jpg').
Example
var DOMAIN_PATH = http://www.mysite.com;
#header {background: url(DOMAIN_PATH/_images/headerimage.jpg)no-repeat; }
Please help me..
You cannot use variables in plain CSS. I suggest using a CSS preprocessor which is a language that compiled to CSS. SASS is fantastic and you can do what you ask like so:
$domainpath: url(http://www.mysite.com/_images/bg-header-noodletools-express.jpg);
#header {background: $domainpath no-repeat; }
Another alternative is LESS.
As mentioned in https://ishadeed.com/article/css-vars-101/ and others, it is possible to use variables in CSS now.
You can do:
:root {
--domainpath: url(http://www.yourdomain.com/_images/bg-header-noodletools-express.jpg);
}
#header {
background: var(--domainpath) no-repeat;
}
Unfortunately, CSS is not dynamic but you can do something like this:
store your URLs in the: root selector Which represents the root element and is identical to the selector html, except that its specificity is higher.
use the URL variable
:root {
/* define your variables here */
--url1: url(http://sitename.com/image1);
--url2: url(http://sitename.com/image2);
}
.img {
background-image: var(--url2);
width: 200px;
height: 200px;
}
Full source code: here