Override primeng css classes in Angular - css

The thing is that I want to override the CSS classes of primeng and change some colors. No matter how I do it it doesn't change. If change the ViewEncapsulation to none the component doesn't even appear. I've tried something like this:
.ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
border: 1px solid red !important;
background: red !important;
color: #FFFFFF;
}
Trying to override the properties in the component css but it still doesn't work.
I know other people have asked the same question but none of the answers has helped me so I'm a little bit desperate.

Add ::ng-deep
::ng-deep .ui-chkbox-box.ui-state-active{...}

I added the classes to the app.less file and it worked like a charm. The component .css was not working.

Related

styling: how to override primeng tabmenu border-colors on active element

I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.
However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such:
https://imgur.com/SYF7xmJ
No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.
CSS that I have tried:
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.
If your style is not applied and you want to override the primeng default styling, you may need to use :host ::ng-deep.
Another way of applying style to a PrimeNG component nested element, is to use the styleClass template property. It is not everytime efficient, you need to sometime force the css through the !important priority modifier. It is not the cleanest way, but there is few CSS properties that are inlined by calculation on some component.
For your specific problem, the .p-tabmenu (and subclasses) is playing with a mixin of focus, when the element is in focus state.
#mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
You need to play with the property box-shadow to remove/modify this blurred color that you dislike with the advices I gave you on the primeng styling if it is not applied as you wished.
Don't forget the pseudo-class :focus while overriding the style.
You may have this kind of result to remove it completely.
:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
box-shadow: none;
}
Try outline: 0 this is something that defaults browsers do for accesibility mainly.

Angular Material MatFormField appearance="fill" theming questions

I have a question dealing with Angular Material theming, specifically the MatFormField directive. Probably around Material v6, I found that the matFormField directive has new options such as appearance="fill" and appearance="outline", I have found the appearance="fill" useful, but I'd like to know how to change the background color, of the fill being used.
I have tried a few approaches such as,
<input class="w-100 bg-white form-control" #tileFilter
[formControl]="filterBy"
[matAutocomplete]="spiritilesAutocomplete"
[matChipInputFor]="chipList"
placeholder="Search by... Keyword, Author, Title, Story, etc."
>
I've also tried selecting
mat-form-field .mat-form-field-flex{
background-color: white;
}
and many other variations of selecting and styling mat-form-field in particular, but I cannot find the css selector nor, an api reference to the background color in the documentation. I see that Material allows theming of the underlined portion and the label, but I would like to target specifically the background-color. Could anyone please point me in the right direction.
In this case, use ng-deep in your component css file.
::ng-deep {
.mat-form-field .mat-form-field-flex{
background-color: white;
}
}
You need to add !important to the background-color value in order to make it work:
.mat-form-field-flex {
background-color: white !important;
}
you can try :
::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
background-color: #fff;
}

Prevent bootstrap reboot from styling hyperlinks

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;
}

How to change Angular-UI Bootstrap Datepicker popup's style using CSS?

I'm using ui-bootstrap-tpls-2.5.0.min.js. I changed dropdown-menu's backgorund color like this in specific html.
.dropdown-menu {
background-color: transparent;
box-shadow: none;
}
But it makes datepicker's background transparent too. I know why it happened, so I cleared that line but nothing changed.
So I want to change datepicker popup's background using CSS selector like this,
.datepicker .ul{
background-color: white;
}
//this is an example code.
what selector do I have to choose to change datepicker's background?
If this is what you require, you need to add these two styles that are highlighted.
Happy coding :)

How to style a GWT CaptionPanel?

Some other CSS files removed the border around all GWT CaptionPanels. Now I'm looking for a way to add the CaptionPanels border again through the GWT projects .css file. Do you have an idea how to do it? Simply adding a .gwt-CaptionPanel{} to the css file has no effect...
I'm answering my own question here.
It took me some time to figure out that GWTs CaptionPanel uses a fieldset under the hood. The following places a red 1 pixel solid border around GWT CaptionPaneles:
fieldset {
border: 1px;
border-style: solid;
border-color: #ff0000;
}
Im not experienced with GWT CaptionPanels but you can try to set an !important on the class that makes the borders in the main style sheet. So you get something like: .borders {border-width:1px !important}

Resources