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
p-calendar stylization
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;
}
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;
}
-
- Posts: 449
- Joined: 08 Aug 2018, 14:09
Hi,dmitev wrote: ↑21 Jan 2019, 10:49I 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;
}
You can try add encapsulation: ViewEncapsulation.None in your component.
Code: Select all
@Component({
...
encapsulation: ViewEncapsulation.None
})
-
- Posts: 449
- Joined: 08 Aug 2018, 14:09
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;
}
Best regards.
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.
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.
-
- Posts: 449
- Joined: 08 Aug 2018, 14:09
Maybe you can give styleClass programmatically, like this;dmitev wrote: ↑04 Feb 2019, 10:55Hi, 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.
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;
}
Code: Select all
<p-calendar (onFocus)="onFocus()" (onClose)="onClose()" [styleClass]="styleClass" ...></p-calendar>
Code: Select all
styleClass:string;
onFocus() {
this.styleClass = "yourClassName"
}
onClose() {
this.styleClass = "";
}
-
- Posts: 449
- Joined: 08 Aug 2018, 14:09
-
- Information
-
Who is online
Users browsing this forum: No registered users and 8 guests