I need to remove the padding from ngx-datatable header cells and body cells.
My actual solution looks like this:
.datatable-body-cell {
padding: 0 !important;
}
.datatable-header-cell {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
calendar.component.scss
#Component({
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
calendar.component.ts
The problem I encountered is that I need to disable the ViewEncapsulation override the ngx-datatable CSS classes datatable-body-cell and datatable-header-cell. Since I use the ngx-datatable in other components as well, the CSS remains overridden when I navigate to the other components. Only when I refresh the CSS in the other components is shown as it should.
Are there any other possibilities to override CSS of a library in a component without affecting the other components?
I'm using Angular 5.
Keep default component encapsulation and use ng-deep
:host ::ng-deep .datatable-body-cell {
padding: 0 !important;
}
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
You could try to do a prefixing/isolation of the css code. That means put e.g. a DIV around the component you want to set a different style and give that DIV a class (prefix-css).
.prefix-css .datatable-body-cell {
padding: 0 !important;
}
.prefix-css .datatable-header-cell {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
The HTML code then looks somehow like that:
<div class="prefix-css">
... here the code for your datatable
</div>
You can make that styles global and then just affect code inside of the div with the class 'prefix-css'.
Look at this example: https://stackblitz.com/edit/angular-qlkcs3
Related
I try to style my component using:
export const StyleCascader = styled(Cascader)`
background-color: gray;
ul.ant-cascader-menu {
background: red !important;
}
`;
Here i am using styled components, but even i added !important, the styles don't appear. What could be the issue?
Demo: https://codesandbox.io/s/custom-trigger-ant-design-demo-gw0kb?file=/StyleCascader.js:74-210
You mentioned ul.ant-cascader-menu selector, but there is no such element in DOM.
https://codesandbox.io/s/custom-trigger-ant-design-demo-f9gb5
I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css.
/* UserProfile.css */
.custom-class {
margin-top: 30 !important;
color: pink;
}
UserProfile in render method have
<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink
I have an option to
<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>
this works fine, but I prefer style code in css files.
I am not sure maybe that issue has no relation to overriding.
you should use px in css files, change your code to margin-top: 30px !important; and it should work.
And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.
You'll need to use camelCase for your classname, so .customClass instead of .custom-class.
Then your import statement should look like:
import css from './UserProfile.css`;
and in your component:
<h1 className={css.customClass}>Title</h1>
Read up on CSS Modules for more information.
You don't have a unit for margin-top in your css class
.custom-class {
margin-top: 30px !important;
color: pink;
}
I have a form in my application where I use the following code from Primafaces:
...other inputs...
<label for="workshopTags">Tags</label>
<p-chips
[(ngModel)]="values"
name="workshopTags"
id="workshopTags"
></p-chips>
I am able to display the Chip element correctly but I would like to style it putting its width to 100% and the height to 100px, but nothing seems to work to change those. This solution didn't work for me. I tried to set a styleClass or an inline style as the documentation suggest but they didn't work either. If I write inline:
style="width: 100%"
The following error is thrown:
Error: Cannot find a differ supporting object 'width: 100%;'
How can I make it work?
there are tow methos to style primeng component overwrite the original style or by create a custom style base on custome class
overwrite
add the style to global style.css or style.scss , this method for overwrite primeng component style without add extra class to the component.
.ui-chips {
display: inline-block
}
.ui-chips ul {
border:2px dashed green !important; /* 👈 I have use important */
}
.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: green !important; /* 👈 I have use important */
border:1px solid #005555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍏🍏
custome style
the method above will change the style of all p-chips component in the entier project , by this method you need to set styleClass property so you can create different style like the example here 👇 , but you need to set styleClass property for every component
<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>
style.css
.p-chips.ui-chips {
/* border:1px solid #ff2200; */
display: inline-block
}
.p-chips.ui-chips ul {
border:2px dashed orange;
}
.p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: orange;
border:1px solid #ff5555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍊🍊
You can use ht /deep/ modifier ,add this inside your app.component.css and delete it from your style.css, and you don't need !important to force the style here, delete it. here is what you are looking for
p {
font-family: Lato;
}
/deep/ .p-chips > .ui-inputtext {
width: 100%;
height: 100px;
}
check it here https://stackblitz.com/edit/angular-primeng-startup-kmm7xw
You could try encapsulation: ViewEncapsulation.None in your override component decorator:
#Component({
selector: 'app-chip',
templateUrl: 'path-to-template where you use ui-chips',
styleUrls: ['path-to-styles where you could override ui-chips styles'],
encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }
To set the width to 100%, you have to use the style or styleClass attribute and set the css property display: block.
As an example using the styleClass attribute
<p-chips
[(ngModel)]="interests"
styleClass="block">
</p-chips>
Here I am using Prime Flex v3 with PrimeNg.
This question already has answers here:
How to change <body> tag style from child component?
(3 answers)
Closed 2 years ago.
I have been trying to override the background body of my login and register components but it's not working
I tried adding a div with a CSS class setting its background color but the bottom part of the page isn't set to the color I picked.
I would appreciate any suggestion on the best way to solve it.
.login-page{
height: 100% !important;
background-color: #e40134 !important;
}
If you want change the class of body in some components you use ngOnInit and ngOnDestroy
//inject in the constructor the "document"
constructor(#Inject(DOCUMENT) private _document) { }
//in init you add a class to de body
ngOnInit() {
this._document.body.classList.add('new-body-class');
}
//in destroy remove the class
ngOnDestroy() {
this._document.body.classList.remove('new-body-class');
}
And
.new-body-class{
background-color: #e40134;
}
The new-body-class can be a class defined in styles.css or you can use ViewEncapsulation.None. Be Carefull, ViewEncapsulation.None makes that the .css of the componet is common to all the aplication, so if you write, e.g.
h5{color:red}
.new-body-class{
background-color: #e40134;
}
futhermore change the background, all yours h5 in your application becomes red
Use encapsulation key at #Component
import {Component, ViewEncapsulation} from "#angular/core";
#Component({
selector: 'login-page',
templateUrl: './login-page.component.html',
encapsulation: ViewEncapsulation.None
})
and use ::ng-deep in css => https://blog.angular-university.io/angular-host-context/
for example:
::ng-deep .login-page {
height: 100% !important;
background-color: #e40134 !important;
}
These are the different ways of encapsulation:
I think this is actually a problem because your has a margin by default.
So in styles.scss, I would just add this:
body: {
margin: 0
}
Try with
.login-page{
height: 100vh !important;
background-color: #e40134 !important;
}
If with this you still do not have the expected result you can add position: absolute.
In any case you can always reset the body by applying a margin: 0. It would be very helpful to know what you see if you inspect it with the browser.
I understand similar topics have been discussed multiple times, but I couldn't find the solution to the problem I am facing.
I am trying to change the styles of PrimeNG in my angular app.
In my component, I changed .ui-inputext class of PrimeNG.
body .ui-inputtext {
font-size: 0.8vw;
padding:0;
background-color: #557db1 !important;
}
This is working only when I set encapsulation:ViewEncapsulation.None in my component class.
I also tried using :host >>>
:host >>> body .ui-inputtext {
font-size: 0.8vw;
padding:0;
color:red;
background-color: #557db1 !important;
}
Issue with using encapsulation:ViewEncapsulation.None in my component is that it changes styles of PrimeNGcontrols in the whole app.
I want to make changes to the control only for this component where I have modified CSS class.
Is there something else I need to do or maybe I am missing something here?
This issue was raised on GitHub here (https://github.com/primefaces/primeng/issues/1812) but it was not tracked further.
Try with :host /deep/ in your component css file.
Add one class to that input field and try to change css using that class rather than using the body and add encapsulation: Viewencaptulation.None in your component.ts file. It will not change other component css.
Here is the example code you can try like this:
<input type="text" class="field_input" pInputText placeholder="Username">
.field_input.ui-inputtext {
font-size: 0.8vw;
padding:0;
background-color: #557db1 !important;
}
Stackblitz Link:
https://stackblitz.com/edit/angular-romzcu?embed=1&file=src/app/app.component.ts