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>
Published May 4, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.