I want to edit my pagination CSS with this following CSS:
<style>
.ngx-pagination a{
margin: 0 3px ! important;
color: #9B9B9B ! important;
font-weight: bold ! important;
border: solid 1px #ccc ! important;
border-radius: 4px ! important;
text-decoration: none ! important;
}
</style>
but I don't know why after running my angular project and inspecting my browser I get this selector on my css [_ngcontent-c3]
why angular adding this unnecessarily selector by itself? I dont know how to remove this
_ngcontent-c# attributes are added when you use ViewEncapsulation.Emulated - which is default.
Angular uses these attributes to target specific elements with the styles. The number c is sort of a unique identifier of the host component. For example, if you have two components with the following templates:
ComponentA
<span></span>
<comp-b></comp-b>
ComponenB
<h1></h1>
Angular will mark all elements with styles inside component A as _ngcontent-c0 and all elements with styles inside component B with _ngcontent-c1:
<comp-a>
<span _ngcontent-c0></span>
<comp-b _ngcontent-c0>
<h1 _ngcontent-c1></h1>
</comp-b>
</comp-a>
This happens due to emulated view encapsulation. See more here angular.io/guide/component-styles#view-encapsulation
To remove this, use:
encapsulation: ViewEncapsulation.None
in the component decorator function. However, this will remove the encapsulation of your css components. In other words, your css will not be independent and it can be affected by other styles.
Related
I have drop-down in vue component and class of that element is "form-control" and it has it's own styles. I need to override the styles of that class. for that I have done coding as follows (in vue component),
<style scoped>
.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but this one didn't work for me. so, how to override it?
Thank you!
Using unscoped style can be very dangerous especially general class names like form-control.
I think it's a better way to use deep styles in your parent component:
<style scoped>
>>>.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but if you can refactor your child component and add a props like formControlStyle with your CSS styles would be the best solution to avoid side effects. You can add a default value to this prop that is your styles in your child component.
You should remove scoped. If you leave scoped it will not apply on other components including those you import.
Or move that css in app.css or app.scss.
Use Deep Selector, ie, :deep(.whatever-style-name) you want to override in your current component
<style scoped>
:deep(.form-control) {
border-radius: 50px;
color: #823F98;
border: 1px solid #3FA294;
}
</style>
by doing this, you can remove the need to use '!important' in every line of css codes that needs overiding.
Refer here in the Vue official docs for more info.
I am struggling to remove all Bootstrap 4 native styling from the Bootstrap .card component. There is a chance that it is actually not related to Bootstrap, however I do see it in Edge as well.
Please help me remove this blue line displayed on a selected .card-header!
I have tried various overrides like below:
.card-header {
background-color: white;
border-color: orange;
border: 1px solid orange;
padding: 0;
padding-bottom: 5px;
text-decoration: none;
}
Thank you!
What you are seeing here is accessibility styling that bootstrap has added to help users see where there are currently focused on the user interface. The collapse component your using also uses the card component as well.
Although I don't recommend it, you can remove the accessibility styling no different than removing other styling like you showed above, however you need to access the pseudo class.
This accessibility styling is done through the pseudo element focus.
You can access the pseudo properties of a class by adding :focus at the end. In this cases the styling is done on a class called .btn. To change only buttons within an collapsible elements do the following.
.card .btn:focus {
box-shadow: none;
}
so I have an override to angular material style in my global scss style like this:
.mat-form-field-infix{
padding: 0.5em 0 0.5em 0 !important;
}
then I want to apply a different padding to the same element in my component since I need a bit of more space to view more data; here is what I do in my component scss style:
:host ::ng-deep .mat-form-field-infix{
padding: 0.2em 0 0.2em 0 !important;
}
but the last style gets propagated to all components once its load. so the question is how can I prevent this behavior?
Note that ::ng-deep is destined to be deprecated: see Special selectors.
You can, however, follow a strategy like Yuriy describes: If you want extra padding for all descendants of my-roomy-component, you can target CSS from your global styles like
my-roomy-component .mat-form-field-infix {
padding: 0.2em 0 0.2em 0 !important;
}
And, again as Yuriy suggests, add more specificity to the selector to help the padding take effect without the !important. Alternatively, the outer component can have its view encapsulation set to None so its styles become global, but scope with CSS selectors again.
Goal: Have CSS only affect the component its on, not others. I only wanted to affect my dropdown, not other text entry fields:
Background/Problem: I understand why it would affect multiple items on the same page (mat-form-field's). But don't understand why it would affect OTHER pages. I looked into it but still unsure.
What I tried:
For example, I originally had:
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
padding-bottom: 2px !important;
}
But it was affecting the spacing of all form-fields on the page, so I edited it to be:
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding-top: 1px !important;
padding-bottom: 2px !important;
}
Other unchanged CSS:
.title-container {
position: relative;
margin-top: 8px;
}
.language-field {
position: absolute;
right: 0;
top: 0;
margin-top: -16px;
width: 115px;
height: 20px !important;
}
This fixed that, but it is still odd to me that changing something on login.component.css would affect all other pages in the site such as profile.component.css
Here is associated HTML for login.component:
<div class="title-container">
<mat-card-title class="text-center">
Please Sign In
</mat-card-title>
<form [formGroup]="_siteForm">
<mat-form-field class="language-field" appearance="outline">
<mat-select (selectionChange)="changeSite($event)" [value]="languages[i].value">
<mat-option *ngFor="let language of languages" [value]="language.value">
{{language.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
When I researched into this:
I found some SO articles (such as Angular 2+ : Component style keeps affecting other components) mentioning using encapsulation: ViewEncapsulation
However, when looking through the site, I don't see this used anywhere, however there is css on different components that all mention mat-form-field but with different values. This seems like it would indicate that encapsulation is not needed.
In regular HTML I did not use to have these problems, but am confused on how this is working in Angular. Does this have something to do with Angular being a SPA?
I think it's your ::ng-deep, remove that.
Then use a specific class name and declare it in that components css file.
e.g. in home.component.css
.mat-form-field-flex {
height: 40px !important
}
It's slightly hard to grasp what you're trying to show here without a code snippet with that CSS.
But if it's breaking Angular's view encapsulation which all components have by default, I'd be almost positive it's because you're using !important selectors, these should really only be used in the rarest of situations - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
The reason for this is because using !important will break the css specificity Angular uses to encapsulate it's components.
Css specificity works like so.
Inline styles are worth 1000pts
Id's are worth 100pts
Classes are worth 10pts
Elements are worth 1pt
The !important is essentially worth infinite points it always takes precedence.
div>p>.className = 12pts
div>p>#classname = 102pts
This means that any styles in
div>p>#classname
will take priority over any styles in
div>p>.classname
I won't go into details here about how Angular achieves there encapsulation with this technique, if your interested here's a good article - https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Ensure you haven't set encapsulation to ViewEncapsulation.None
#Component({
selector: "my-component",
templateUrl: "./my-component.html",
styleUrls: ["./my-component.scss"],
encapsulation: ViewEncapsulation.None
})
I also got the same problem. You are using ::ng-deep. ::ng-deep is a global level element it affect all the component. So, use :host as prefix. :host will contain the ::ng-deep in the same component. It won't allow it to affect other components. Use this :host ::ng-deep. Replace all ::ng-deep with :host ::ng-deep.
I am trying to style my hyperlinks but Bootstrap 4 "Reboot" overwrites my css and changes the styling of my links to this:
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
Other than copying the reboot css, modifying and hosting it locally, is there any way to prevent reboot from styling the links? It does not matter if you load your custom css last, reboot always writes over the top of it.
Adding !important at the end of style is the easy way but, that triggers a waterfall where you will need to add more !important in your styling files.
This is why you should learn tree structure of styling.
What I recommend is add a class name to your body tag and override reboot.css or whatever like
<body class="body-class-name">
and then go into your css file which has the highest priority and put
body.body-class-name .a{text-decoration: none}
Happy coding!
It looks, that you load your CSS in the wrong sequence.
Put the bootstrap CSS above your own CSS.
Then you can overwrite bootstrap-settings without !important (which should still be the very last option).
try !important at the and of the style.
a {
color: #007bff !important;
text-decoration: none !important;
background-color: transparent !important;
-webkit-text-decoration-skip: objects !important;
}