I'm trying to override material UI checkbox css in my Home Component and it is working fine. But there are side effects like css of checkbox in form component is overriding. Can anyone suggest a solution for this.
HTML used
<mat-checkbox formControlName="home">
Home
</mat-checkbox>
css used for over riding by default it is grey color
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}
Form component mat checkbox - for this component also it is overriding border color to blue without writing any css
<mat-checkbox formControlName="form">
Form
</mat-checkbox>
I believe this is happening due to usage of ::ng-deep
I even tried ViewEncapsulation also in the Home component. It is still overriding css in Form component and other css in both the components.
Any help regarding this would be appreciated.
To apply the style only inside a specific child component, add the :host selector to the following code in the CSS of that component:
:host ::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}
This will scope this rule to all checkboxes which are in this current component and all its children and will work pretty well in case of routed components.
But if you want to stick this css rule only for home page template then you can use:
home.component.css
.mat-checkbox ::ng-deep .mat-checkbox-frame {
border-color: blue !important;
}
Angular will replace it with:
.mat-checkbox[_ngcontent-rvb-c0] .mat-checkbox-frame {
border-color: blue !important;
}
where _ngcontent-rvb-c0 is unique identifier of current compoent
Related
I have primeng and like the attached screenshot.
As you can see both these primeng html tags has div class "p-dialog-mask p-component-overlay p-dialog-mask-scrollblocker" in common. I want a different overlay for the parent pages when the dialog opens up and a different one when the confirmdialog opens up. I tried below:
p-dialog, .p-dialog-mask.p-component-overlay{
background-color: #000;
}
p-confirmdialog, .p-confirmdialog-mask.p-component-overlay{
background-color: #rgba(0, 0, 0, 0.4)!important;
}
This didnt work. I tried to use a different style with [styleClass] in p-confirmDialog tag but even that wouldnt work. Irrespective of what i give , it takes the css for p-dialog and not picking a different css for p-confirmdialog.
For now I have added class names like below:
.p-dialog-mask.p-component-overlay.ng-tns-c45-0,
.p-dialog-mask.p-component-overlay.ng-tns-c45-1,
.p-dialog-mask.p-component-overlay.ng-tns-c45-2,
.p-dialog-mask.p-component-overlay.ng-tns-c30-0,
.p-dialog-mask.p-component-overlay.ng-tns-c30-1,
.p-dialog-mask.p-component-overlay.ng-tns-c30-2{
background-color: #000;
}
This works but it isnt consistent in all the enviornments. When I move code to UAT the generated class names are different in the browser and I have to keep changing . Is there a way i can change the styles without touching the class names. I am expecting this to be handled in p-dialog and p-confirmdialog. Any suggestions please. Additionally I would add black to p-dialog only on main page and in the remaining pages it should take the default css.
Any help highly appreciated. Thank you.
I assume it comes from style isolation
Try to add :host ::ng-deep on the classes you want to override.
I had to do it multiple times in my project using primeng.
For example
:host ::ng-deep .p-chips.p-component {
width: 100%;
}
Here in your case, it would be
:host ::ng-deep p-dialog,
:host ::ng-deep .p-dialog-mask.p-component-overlay {
background-color: #000;
}
:host ::ng-deep p-confirmdialog,
:host ::ng-deep .p-confirmdialog-mask.p-component-overlay {
background-color: #rgba(0, 0, 0, 0.4) !important;
}
I'm in a situation where I need to use both and tags in this project because in some situations the code breaks if I choose mat-select. But visually the select tag looks plain old ugly.
I tried looking for the CSS in Material Component documentation but wasn't able to find it. Do you guys have any suggestion or actually know where I may find this CSS?
Where to find mat-select classes?
To find them you can use the browser inspector or seeing the master css file:
https://github.com/angular/components/blob/master/src/material/select/select.scss
Globally
If you need to update it globally you can override one or more of those classes according to your need in your style.css.
::ng-deep
You can use ::ng-deep (like ::ng-deep .mat-select-content) to force the override the mat-select style in your component.
::ng-deep .mat-select-panel .mat-option {
padding: 10px;
}
ViewEncapsulation
You can the ViewEncapsulation to None if you want to avoid to inherit the mat-select style imposed by Angular Material in your component.
Component Template
import {ViewEncapsulation } from '#angular/core';
....
#Component({
....
encapsulation: ViewEncapsulation.None
})
Component Style
.mat-select-panel .mat-option {
padding: 10px;
}
I created a component with a template containing a div holding the "input"-value and an indicator showing if capslock is active. When I add the Bootstrap .form-control class to the host element, it looks pretty much like other input fields except when being focused or disabled.
Is there a way to make use of :disabled and other pseudo selectors like :focus defined in Selectors 3 when creating Angular Components?
I'm stuck with finding a good way to create form components that shares the look and feel of other input components.
Are there other (preferred) ways to make use of input stylings without having to redefine everything?
Would it be better to create a directive and "hack" the template using Renderer2?
Not sure if that's what you are looking for, but having a template like
<div class="form-control">
<input type="password" class="custom-input">
</div>
try targeting your input with a css class and style it (if you are using scss) with e.g.
.custom-input {
//some styles
&:disabled {
color: grey;
background: lightgrey;
}
}
If you are using regular css you could do something like
.custom-input:disabled {
color: grey;
background: lightgrey;
}
I'm working with Bootstrap 4, and for the <select> elements i want to use Select2.
The problem is that it does not have a official Bootstrap 4 template, so i was looking and i found this project, which is awesome.
But i having one issue with is-invalid class.
When i use it, the <select> borders change to red when the page loads and then return to its normal state
I try to make a simple class to use with the same Bootstrap color like
.invalid-select2 {
border-color: #dc3545;
}
.invalid-select2:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
But the result is the same;
You can see the problem in
JSFIDDLE
Someone has idea how can i deal with it?
Thanks so much!
The flikcering is because you're adding the class the the select box's class attribute so the style is applied immediately. Afterwards, select2 classes are applied which hides the select box (causing the flicker).
One way around this is to simply apply the class when the document is ready.
$(document).ready(function(){
$('#combo').select2
({
theme: 'bootstrap'
});
$("#combo + span").addClass("is-invalid");
});
EDIT: To fix the focus problem you're experiencing you need to over-ride a couple of classes.
.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
border-color:red !important;
}
.is-invalid .select2-selection selects the top part of the dropdown, and the second class (.needs-validation ~ span > .select2-dropdown) selects the actual dropdown list. Note that I've added .needs-validation to the top level div once the form is validated you can simply toggle that to was-validated
https://getbootstrap.com/docs/4.0/components/forms/#validation
Here is a fiddle
I was able to use some CSS to style a red boarder
.is-invalid + .select2-container--bootstrap .select2-selection--single {
border: 1px solid #f44336;
}
Did you try to add !important to css property?
I am trying to build a double themed app using angular 2. The component css in question already uses :host /deep/ to force styling to child components.
However I am trying to toggle this styling based on the html theme, and am using :host-context.
I find that when I try to nest :host-context within a :host /deep/ tag, the changes from :host-context don't render.
E.g.
:host /deep/ .box {
:host-context(.blueTheme) & {
background-color: blue
}
}
Any ideas on why this doesn't work?
update
::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
original
/deep/ is deprecated. ::ng-deep is the new thing.
I guess what you want is
:host-context(.blueTheme) /deep/ .box {
background-color: blue
}