Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

When the arrow is hovering over the checkbox, the checkbox hover

SA-22781

Summary



User has configured an OnHover-SetStyle action set on a checkbox. In the SetStyle the inline style is configured to display a border.
The issue is once the user hovers over the checkbox, instead of the label and removes the mouse the the SetStyle -Border still remains on the screen.
Also user expects the border to come for both checkbox and label combined when the user hovers on the label of the check box, currently the border comes only for the label.

 

Error Messages



Not Applicable.

Steps to Reproduce



1. Add checkbox control to section.
2. On hover of checkbox, add action as Set Style with inline style as background-color:XXX.
3. Run the use case and hover. 


Root Cause



A defect in Pegasystems’ code or rules.

On hover check box styles set in action item are getting applied to label not the checkbox input element.

But when user hover on the checkbox element style getting applied to checkbox+label and on hover out styles stays there. On hover out style should reset.
In PRPC for check box control, runtime control is generated as:



When label is hovered, style is set only on <label> but when input checkbox or span.checkbox is hovered, then it sets color to span.checkbox element.
Observed that in ChangeStyle API once span.checkbox is style set, it is not getting removed, cause again hover event on input checkbox element is getting called which is resetting the color again.

Resolution



Perform the following local-change: 

Instead of hover event , checkbox hover can be handled through CSS by performing the below steps:


1.Create new style class in skin rule.
2.Use the new style class in check-box presentation tab for read-write style class available in advanced configuration setting.
3.Add below style in userworkform:

<style>
.<newClassName> span.checkbox:hover{
  box-shadow: 0 0 5px red;
  border: 1px solid red;
}
</style>

 

Suggest Edit

Published May 4, 2016 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us