Page 1 of 1
p-calendar stylization
Posted: 17 Jan 2019, 11:28
by dmitev
Hello, I want to stylize the input box on the p-calendar.
I want to keep it blue when there is interaction with the control and gray when there isn't. So far i have managed to do it, but when i click the arrow for next month the focus is lost and the control is gray. If i select year/month from the dropdown the focus is preserved and the stylization is ok. Is there any way to stylize the input box when the calendar is open?
https://imgur.com/a/WYQvarc
Re: p-calendar stylization
Posted: 18 Jan 2019, 16:23
by yigitfindikli
Hi,
you can use inputStlye property.
Re: p-calendar stylization
Posted: 21 Jan 2019, 10:49
by dmitev
I have styled it but the problem is that is loosing focus when month arrow is clicked. I want to style it when the calendar is open.
https://imgur.com/a/WYQvarc
Using this in the CSS styles the field when there is focus in the control. But after clicking on an arrow the focus is lost
.ui-calendar.ui-calendar-w-btn:focus-within .ui-inputtext {
border-left: 1px solid #0FB4E1;
border-top: 1px solid #0FB4E1;
border-bottom: 1px solid #0FB4E1;
background-color: #F6FAFB;
}
Re: p-calendar stylization
Posted: 01 Feb 2019, 11:06
by yigitfindikli
dmitev wrote: ↑21 Jan 2019, 10:49
I have styled it but the problem is that is loosing focus when month arrow is clicked. I want to style it when the calendar is open.
https://imgur.com/a/WYQvarc
Using this in the CSS styles the field when there is focus in the control. But after clicking on an arrow the focus is lost
.ui-calendar.ui-calendar-w-btn:focus-within .ui-inputtext {
border-left: 1px solid #0FB4E1;
border-top: 1px solid #0FB4E1;
border-bottom: 1px solid #0FB4E1;
background-color: #F6FAFB;
}
Hi,
You can try add encapsulation: ViewEncapsulation.None in your component.
Code: Select all
@Component({
...
encapsulation: ViewEncapsulation.None
})
Re: p-calendar stylization
Posted: 01 Feb 2019, 16:54
by dmitev
The problem is not applying stylization to the control, the problem is that i want to style it according to whether the calendar is open or not. I just can't find the correct CSS syntax to style it on that condition.
Re: p-calendar stylization
Posted: 04 Feb 2019, 08:34
by yigitfindikli
dmitev wrote: ↑01 Feb 2019, 16:54
The problem is not applying stylization to the control, the problem is that i want to style it according to whether the calendar is open or not. I just can't find the correct CSS syntax to style it on that condition.
Hi,
You can try that (when calendar open);
Code: Select all
.ui-inputwrapper-focus .ui-calendar .ui-inputtext {
border-left: 1px solid #0FB4E1;
border-top: 1px solid #0FB4E1;
border-bottom: 1px solid #0FB4E1;
background-color: #F6FAFB;
}
If you wanna change when calendar closed then delete ".ui-inputwrapper-focus" .
Best regards.
Re: p-calendar stylization
Posted: 04 Feb 2019, 10:55
by dmitev
Hi, thanks for the support but that does not seem to help with the problem.
https://imgur.com/a/WYQvarc
I have added a video to show how the text field does not preserve the blue color after interaction with the calendar. Actions like changing months or years seem to cause problems, possibly loosing focus.
Re: p-calendar stylization
Posted: 04 Feb 2019, 12:56
by yigitfindikli
dmitev wrote: ↑04 Feb 2019, 10:55
Hi, thanks for the support but that does not seem to help with the problem.
https://imgur.com/a/WYQvarc
I have added a video to show how the text field does not preserve the blue color after interaction with the calendar. Actions like changing months or years seem to cause problems, possibly loosing focus.
Maybe you can give styleClass programmatically, like this;
css;
Code: Select all
.yourClassName .ui-inputtext {
border-left: 1px solid #0FB4E1;
border-top: 1px solid #0FB4E1;
border-bottom: 1px solid #0FB4E1;
background-color: #F6FAFB;
}
html;
Code: Select all
<p-calendar (onFocus)="onFocus()" (onClose)="onClose()" [styleClass]="styleClass" ...></p-calendar>
component;
Code: Select all
styleClass:string;
onFocus() {
this.styleClass = "yourClassName"
}
onClose() {
this.styleClass = "";
}
Re: p-calendar stylization
Posted: 04 Feb 2019, 14:37
by dmitev
Thanks, this seems to have fixed it.
Re: p-calendar stylization
Posted: 04 Feb 2019, 14:48
by yigitfindikli
dmitev wrote: ↑04 Feb 2019, 14:37
Thanks, this seems to have fixed it.
Glad to hear!