I'm using mdDataTable to display data retrieved form Server. Is there a possibility to change the css class of mdt-row? If I try to add a class, mdDatatable overwrites it
in your own css file, you can override the css by explicitly targetting the angular md classes, like this:
.mdt-row {
{overridesettingname}: {newsetting};
}
But I'd be careful because that overrides site-wide. You can override just a single page by targeting a parent element on the page, like:
.{mypageclassname} .mdt-row {
{overridesettingname}: {newsetting};
}
Another note, make sure YOUR css file is loaded AFTER the angular css file(s).
You can explore the classes and ids for the element in the developer tool, It is easy to add style for all elements, Here I've added sample styles you can keep added as you wish. Hope it helps.
.mat-table {
overflow: auto;
max-height: 700px;
}
.mat-header-cell .mat-sort-header-sorted {
color: #0A0A0A;
}
md-pagination-wrapper {
width:auto !important;
}
md-row:nth-child(even){
background-color:#EDF1F5;
}
md-row:nth-child(odd){
background-color:#FDFDFB;
}
Related
I've been told that I shouldn't use HTML tags to style it in the CSS but rather use classes. Okay, not a problem I'll just add className to the tags. However there are quite a few of them in the code, so I was just wondering if there was a better way than just copy pasting the className into each tag or if there's a way to say for example all p tags should have class "text".
if all p tags should have a particular style then you should highly consider styling all the p tags directly via CSS
p {
font-size: 16px;
/* Your Styles here */
}
p.specific {
font-size: 24px;
/* Override styles for specific elements here */
}
Now answering the actual question. This can be done via JavaScript but once again I don't recommend this as this will have serious performance issues if there are a lot of nodes on the page.
document.getElementsByTagName("p").forEach(p => p.classList.add("text"));
Since you have tagged this as react, you can also extract the paragraph into its own component
const P = ({ children }) => {
return <p className="text">{children}</p>;
};
You can either add class to all elements like Mailk suggested.
document.querySelectorAll("p").forEach(p => p.classList.add("text"));
or you can simply find and replace all the p tags using the text editor.
find: <p
replace to: <p className="text"
I am new to PrimeNg with Angular. I have a simple primeng p-inputnumber component as below:
<p-inputNumber
[showButtons]="true"
[placeholder]="placeholderText"
incrementButtonIcon="fal fa-plus"
decrementButtonIcon="fal fa-minus"
[minFractionDigits]="_config?.integer ? 0 : 1"
[min]="_config?.minValue"
[max]="_config?.maxValue"
[(ngModel)]="value"
(onBlur)="onBlur()">
</p-inputNumber>
And have created a wrapper to this component i.e is the wrapper to the above component and using it in a homepage component. Now i want to apply style to this wrapper component which in turn should apply style to primeng component. Right now it is not setting.
Homepagecomponent.html
---<app-number-input class="disabled">
------<p-inputNumber>
i set the below style in homepagecomponent.scss
:host ::ng-deep .disabled {
background: red;
}
But the above is not being set. Can anyone help me how to achieve my expected?
Thanks
You would need something like this in your CSS
:host ::ng-deep {
// you may want to specify your app element or something here to be more specific than just .disabled class
.disabled {
// tweak this list to whichever pieces of the p-inputnumber you want to have red background
.p-inputnumber,
.p-inputnumber-stacked,
.p-inputnumber-horizontal,
.p-inputnumber-vertical,
.p-inputnumber-input,
.p-inputnumber-button,
.p-inputnumber-button-up,
.p-inputnumber-button-down,
.p-inputnumber-button-icon {
background-color: red;
}
}
}
In my MGT React SharePoint WebPart, I would like to have some of the profile images displayed with large size (48px), while other images displayed with medium size (36px).
I know the property avatarSize can be used, but this only supports Small, Large or Auto. And in the mgt-person css class, I can specify --avatar-size: 36px. But since this css class affects all person components on the page, all profile images are now sized 36px. And there is no support for specifying a css class on the person component itself.
Do you know if this can be achieved another way?
UPDATE:
I managed to solve this myself with the help from this article:
https://developer.microsoft.com/en-us/graph/blogs/a-lap-around-microsoft-graph-toolkit-day-4-customizing-components/
Using the following definitions in my scss file, it can adjust the avatar size based on for example a WebPart property:
.personsmall mgt-person {
--avatar-size: 24px;
}
.personmedium mgt-person {
--avatar-size: 36px;
}
.personlarge mgt-person {
--avatar-size: 48px;
}
And in my tsx file, it looks like this:
public render(): React.ReactElement<IRolesProps> {
let cf: CommonFunctions = new CommonFunctions();
return (
<div className={this._getAvatarSizeClass(this.props.roleSize)}>
{this.props.roles && this.props.roles.map((val) => {
return (
<Stack className={styles.roleSpacing}>
<Text className={styles.roleHeader} variant="xLarge">{val.role}</Text>
<Person userId={val.person} view=PersonViewType.twolines fetchImage={true} showPresence={true}
personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person>
</Stack>);
})}
</div>
);
}
private _getAvatarSizeClass(avatarSize: AvatarSize): any {
if (avatarSize) {
switch (avatarSize) {
case AvatarSize.Small:
return styles.personsmall;
case AvatarSize.Medium:
return styles.personmedium;
case AvatarSize.Large:
return styles.personlarge;
default:
break;
}
}
}
Hope this helps someone else struggling with this.
There is a styling guide: MGT Styling guide
You can simply create a CSS rule and call the desired component. Example from the styling guide
mgt-person {
--avatar-size: 34px;
}
Thus you should be able to combine this with a CSS class such as:
mgt-person.my-avatar-size {
--avatar-size:42px;
}
Since all React components expose a className attribute this should work:
<Person className='my-avatar-size'></Person>
UPDATE
Since, for some reason, there is no className attribute available, why don't you use a data- attribute instead:
mgt-person[data-cssclass='my-avatar-size']{
--avatar-size:42px;
}
<Person data-cssclass='my-avatar-size'></Person>
Hacky, but should work. Also, you might want to look at the actual generated HTML and use this.
Consider in CSS,
.content
{
width:500px;
box-sizing: border-box;
}
I have added this css class inside react component as following
const Banner = () => {
return (<div className="content">This is message content</div>);
}
How to write jest and enzyme test cases to ensure the 'box-sizing' with 'border-box' applied properly?
Notes: I can write the test case to ensure the ".content" class added to this element. But exactly, i need to write test case to ensure the value in 'box-sizing'.
I am not sure how to fix your issue, but keep in mind your test will not cover
* {
box-sizing: border-box;
}
if you will defined somewhere alse.
From my perspective, it does not make sense to test styles, because we can not guaranty from the test perspective that element will look like we want to. So still you will need to open the browser and check your element works properly, but you are writing tests to avoid it.
By adding this code to Banner.test.js file, it'll check if className called content have inline style property for box-sizing and is it equal to border-box or not. But it'll test only inline styles.
const banner = shallow(<Banner/>);
it("render propperely", () => {
expect(banner).toMatchSnapshot();
expect(banner.find(".content")
.get(0).props.style).toHaveProperty("box-sizing", "border-box");
});
I'm having a problem with overwriting CSS styles using composing in modules.
My current setup:
I have a thirdparty grid library file which I insert into my application in the entry JS file:
import './css/thirdparty/file.css';
I'm also using CSS modules for my components like this:
import styles from './component.module.css';
const Component = () => {
// component code omitted
// in render
<div className={styles.col14}></div>
In webpack config, I have two rules setup to load the file.css using plain css-loader and the *.module.css files using css-loader with modules.
All of these files are loaded correctly and the styles are all present. Here's the problem:
file.css contains:
.col-1-4 /* and all other col-1-* variations*/ {
float: left;
min-height: 1px;
padding-right: 20px;
}
.col-1-4 {
width: 25%;
}
component.module.css contains:
.col14 {
composes: col-1-4 from global;
padding-right: 0;
}
Current output of the component:
<div class="col14__3bA8W col-1-4">
So the style is supposedly overwritten, but what I see in the browser is that the padding-right is still 20px. It seems to only happen when I try to compose from a global style, because if I compose two classes from the same component CSS file, it works as expected.
Does anyone know why this is not working?
You can try with
.col14 {
composes: col-1-4 from global;
padding-right: 0!important;
}