p-calendar stylization

UI Components for Angular
Post Reply
dmitev
Posts: 6
Joined: 17 Jan 2019, 10:17

17 Jan 2019, 11:28

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
Last edited by dmitev on 21 Jan 2019, 11:07, edited 1 time in total.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

18 Jan 2019, 16:23

Hi,
you can use inputStlye property.

dmitev
Posts: 6
Joined: 17 Jan 2019, 10:17

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;
}

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

01 Feb 2019, 11:06

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
})

dmitev
Posts: 6
Joined: 17 Jan 2019, 10:17

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.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

04 Feb 2019, 08:34

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.

dmitev
Posts: 6
Joined: 17 Jan 2019, 10:17

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.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

04 Feb 2019, 12:56

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 = "";
    }
    

dmitev
Posts: 6
Joined: 17 Jan 2019, 10:17

04 Feb 2019, 14:37

Thanks, this seems to have fixed it.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

04 Feb 2019, 14:48

dmitev wrote:
04 Feb 2019, 14:37
Thanks, this seems to have fixed it.
Glad to hear!

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests