If i put this code in the global css styles then it is working.The background image is set on the body of the page
body, html {
height: 100%;
}
body {
background-image: url("../../assets/img/p.jpg");
background-size: cover;
background-attachment: fixed;
}
But if i try the same on some not global css style , for example of some copomnent then it is not working.I ve checked the path and it is correct.Also the styles are working for everything except for the body background image.
Why is this happening?
you cannot do that because of style encapsulation. whenever you style something inside component css Angular adds some dynamic attributes to that selectors, so for example
.some-class{
color:red;
}
will transfer to (maybe)
.some-class[ng-2312313]{
color:red;
}
and then this styles will be applied inside your component, by that Angular protects you from not styling some component from another component.
said that, styling body element inside a component will not work.
you can disable encapsulation, by viewEncapsulation property
#Component(.... encapsulation : ViewEncapsulation.NONE )
but doing so you will expose all your styles outside the component, so it's not best way to do it.
you could add these kinds of styles in global CSS (as you do now), it's the best way to do
Related
I have a file global.css in assets folder, file is imported in main.js. Styles from this file works only if i dont have same style applied in component style. For example, in component i have this
h1 {
font-size: 50px;
}
then in global.css
h1 {
font-size: 35px
}
this won't work. Is there a way to override component styles with this global.css?
Make sure your style tag within component has scoped attribute otherwise it'll override global styles.
Review: https://codesandbox.io/s/vue-basic-demo-j87nz0?file=/src/components/HelloWorld.vue
You need to look into CSS specificity to solve this issue.
Here, it's happening because the global style is applied at first, then component style comes in second, you could inspect that in your devtools and see various declarations applied to your h1 element.
There are of course advanced possibilities in CSS but writing something more specific
h1.my-cool-class { /* or just .my-cool-class */
font-size: 50px;
}
should be enough here.
You can use h1 { font-size: 35px !important; }
Or with classes
For example:
.headline-h1 {
font-size: 35px
}
Thank you everyone for answering. I had to deal with some messy css, every component had its own css style for every heading and paragraph(sizes, colors, fonts, etc.). I deleted all of these and put them in global.css file and then changed html elements to be compatible with sizes. That's it.
I am trying to convert my bootstrap theme to a RTL layout. I load two stylesheets due to the orders you see below:
#import "mycss.css";
#import "RTL.css";
How I can disable any CSS property in mycss.css by overriding them with a second CSS property in the second stylesheet?
I tried the initial value for this property, but not working.
Look at my example here:
First property in mycss.css stylesheet:
.myclass { right: 64px; }
Second property should be disabled and override by the code below:
.myclass { left: 64px }
The problem is that, after writing the second CSS property, both properties remain. I expected the disabling or deleting of the first property with only the second property remaining.
I have a similar problem with background-color, too.
For disabling you can use 'unset'.
For example background-color: unset;
All css properties have a default value. You can reset the value to this default to make it ignored.
In the case 'right', the default is 'auto' - MDN
.myclass {right: auto; left: 64px; }
Hey guys so im struggling to figure out how to add custom styles to elements for different pages
If i add the styles to the global css it works.
For example i use ui-carousel on three different pages and i need them to look different on each, so global wont work for me in this case
If i put a div class in my indiviudal css pages it works fine as i can name the class.
<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
[value]="_photos">
<ng-template let-p pTemplate="p">
<p>
<img style=" width: 100%;
padding: 4px;
/* margin: auto; */
border: 1px solid #ddd;"
[src]="p.photo">
</p>
</ng-template>
</p-carousel>
Any help appreciated
Let us understand your query first -
You want to change the css styling of element or component in different places.
For this you following options -
#Input inline css
If you have just few properties you want to update then you can opt for inline css.
#Input Style Class
If you have set of themes that you want to apply on the component, then you can go with the CSS Class option as #Input
There are some more advance option like Dynamic Template but I don't think you need that.
Overwrite CSS
To overwrite css you can use :host or :host ::ng-deep
Examples :
:host >>> .ui-dropdown-item {...}
or
:host ::ng-deep .ui-dropdown-item {...}
You can see the demo in action here - https://stackblitz.com/edit/angular-wz8iq4
You can have style-sheet corresponding to each component you create. Specify which stylesheet you want to use for a component while declaring the component:
e.g.
#Component({
selector: 'your-component-selector',
templateUrl: './your-component.html',
styleUrls: ['./your-component.css']
})
You can have multiple stylesheets for a component using the styleUrls array.
Hope it helps!
I think you might need to explain your question a little bit if #alokstar's answer is not what you need, because that is how I would do it as well.
If you have a CSS file for each component, plus the global one, and you specify which stylesheet you want to use in which component, there wouldn't be a problem.
p-carousel {
<some css styling>;
}
I think this article link explains it pretty well too.
Please see this link
Apply CSS Style to child elements
Possible solution would be to apply a custom class name to each instance on a div wrapper or the element itself. You may also need to apply ::ng-deep but ultimately you need some sort of identifier to make them a unique 1:1 to the css you want to apply.
<p-carousel class="classInstance1 " numVisible="4"
p-carousel.classInstance1 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: white !important;
}
p-carousel.classInstance2 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: green !important;
}
Trying to change the background of material.angular.io mat-card globally.
I added the below to styles.css and it does not work.
mat-card {
background:pink
}
You just need to add a period in front of your css rule:
.mat-card {
background: pink;
}
Here is a StackBlitz to play with it using a forked example from the Angular Material site.
I am trying to increase bootstrap 3.0 navbar height which is used with fixed top behavior.
How can I do it?
Without seeing your code it is hard to help but in Bootstrap 3 typically,
This is the less variable #navber-height and #navbar-padding-vertical will adjust the height of the navbar.
But in my current Bootstrap app I have it set up different using
header.navbar {
height: 54px;
}
The easiest thing to do would be to inspect element on the navigation bar then look at the css to see where the height value is. Adjust it to the desired height.
Then create a rule in your css with !important to override the existing Bootstrap css.
This is another example without less.
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
Create new css file and put your overrides in it.
<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>
inside overrides.css
If this css rule exists inside Bootstrap when you inspect element then override it in the overrides css file you have added now.
remember use !important
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
If you are using the .less or .scss version, you can edit the following $navbar-height variable in code:
https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360
If not, you need to override it with a rule by statiing:
.navbar {
height: {new height};
}