I'm using Angular 14 and PrimeNG 14. I have a p-calendar component that I would like to style with a red border color if the user has not entered a value. I have
<p-calendar
[showIcon]="true"
[ngClass]="{'border-red-500': this.submitted && this.form.get('myDate')?.hasError('required')}"
formControlName="myDate"></p-calendar>
However, this does not do anything to change the style. What is the proper way to change the border color of the p-calendar component given certain conditions?
Border should be applied to input not p-calendar. Change your code to set inputStyleClass as below.
<p-calendar [showIcon]="true" [inputStyleClass]="this.submitted && this.form.get('myDate')?.hasError('required') ? 'red-bar': ''" formControlName="myDate">
I have created stackblitz for this.
https://stackblitz.com/edit/primeng-calendar-demo-vjtcnp?file=src%2Fapp%2Fapp.component.html
Or even with your implementation, you can simply change your class definition to
.border-red-500 .p-inputtext {
border: 1px solid red;
}
write the style in global styles.css.
Related
I have an Input component inside Form.item and input is disabled, I want input border to change color when error. How to do that?
You can change the default disabled border-color by adding the following css to your app:
.ant-input-status-error.ant-input-disabled,
.ant-input-status-error.ant-input-disabled:hover {
border-color: #ff4d4f;
}
You can take a look at this sandbox for a live working example of this solution.
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
I'm using antd radios and checkboxes. I want to give custom colors to them. I found answer about checkbox but found no way to change radio button color.
Is there any way to do so?
You can achive it by overriding following css classes:
.ant-radio-checked .ant-radio-inner{
border-color: red !important ;
}
.ant-radio-checked .ant-radio-inner:after{
background-color: red;
}
.ant-radio:hover .ant-radio-inner {
border-color: red ;
}
First block is responsible for coloring the circle around the dot in radio. You can ignore !important rule but then you have to override :focus selector like:
.ant-radio-checked .ant-radio-inner:focus{
border-color: red;
}
Second block color the dot in the middle of selected radio. The last one color circle on hover. I am not completely sure why ant-radio-inner should be inside radio:hover, but it works for me.
There is simple form and some textfields on this form. I have to set colors
(background and font) in two of them on runtime.
I tried to do it two ways:
1) fieldInstance.addClass('aaa') with css like this
.aaa .x-form-field {
background-color: black;
color: red;
}
2) fieldInstance.setFieldStyle('font-weight: bold;color: red;background-color: black;');
both methods are working because I see the bottom age of both is
fields is thick in black color, and both fields are working the same (almost) way.
Before enter and after exit background color is white.
When I start to edit this fields, background of first
is always white, background of the second is black until
I leave the field.
Could you explain me whats wrong?
For <input> element applied many classes beside x-form-field, like x-form-text and some of them define color and background-color aswell. So I guess that some of that classes may be more specific than .aaa .x-form-field. Try to use !important within your CSS rules:
.aaa .x-form-field {
background-color: black !important;
color: red !important;
}
I think that the 1st function append a class to the Others already presents.
In the second case you replace values of style already setted.
Maybe to have the same issue you need to modify the x-form-field fields, instead of append Others.
I Always use the second option if i have to modify style on Runtime.
maybe posting other code i can see better where the problem could present
I have read a few questions here and here on this on StackOverflow but nothing seems to help with my situation.
I want to set the background color and border of a textfield dynamically.
My textfield looks like this, but the background is still not changed :
This is because of an image in the background that gives a shading effect. So I try and remove it in the CSS using background-image:none; and background:none; :
.invalid-component {
background-color : #f4f777;
border: 2px dotted #ffee27; //works!!
background-image:none;
background:none;
}
This still has no effect, the image is not removed and the background color does not change. Any help?
Im taking a guess here and going for ExtJS 4.2.1 with Classic theme.
So just change your CSS to
.invalid-component {
background : #f4f777 !important;
border: 2px dotted #ffee27; //works!!
}