cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

The PTC Community email address has changed to community-mailer@ptc.com. Learn more.

Issue with datepicker focus and being active

PG_10250187
11-Garnet

Issue with datepicker focus and being active

There is a border which is to be removed when focus or being active on the date picker. Tried with style properties on the mashup but if we remove the border there, then the calendar section date border is also hidden.

 

It will be good if we can write custom CSS or any alternate solution.

1 ACCEPTED SOLUTION

Accepted Solutions

I fixed the issue. Below is the code:

 

ptcs-datepicker::part(date-field-text-box):hover, ptcs-datepicker::part(date-field-text-box){
border: none !important;
outline:none;
}

 

also updated the focus in style properties (border).

View solution in original post

7 REPLIES 7
abjain
13-Aquamarine
(To:PG_10250187)

@PG_10250187 : Please try the attached entity. Have used the below custom CSS.

 

ptcs-datepicker::part(date-field)::part(text-box):hover{
border: none ;
}

No it didn't work.

abjain
13-Aquamarine
(To:PG_10250187)

@PG_10250187 : Which thingworx version are you using? Did the entity provided did not worked after import? For me its working correctly. i.e when I hover over date picker , the border is becoming invisible.

I'm using 9.3 thingworx version. I added the CSS in Custom CSS in respective mashup, but it didn't work. When I hover the border is not coming. Once I click on the datepicker, it shows one blue border (i.e from focus), then it shows one grey border (i.e being active).

abjain
13-Aquamarine
(To:PG_10250187)

@PG_10250187 : Please use this CSS instead for 9.3 twx.

ptcs-datepicker::part(date-field-text-box):hover{
border: none ;
}

Hi Abjain,

 

Thank you for the reply!

 

It worked but I'm facing another issue when I'm leaving the focus. And also the blue border comes when focus, I need that also to be removed.

 

I have attached the video for reference.

I fixed the issue. Below is the code:

 

ptcs-datepicker::part(date-field-text-box):hover, ptcs-datepicker::part(date-field-text-box){
border: none !important;
outline:none;
}

 

also updated the focus in style properties (border).

Top Tags