@ArindamM3464

Possible Causes and Fixes

1. CSS Styling Conflicts

• Cause: Hover styles applied globally or inconsistently to the close icon.

• Fix:

  • Inspect the icon using browser dev tools.

  • Look for styles like :hover, transform, background-color, or border.

  • Override with custom CSS in your skin or override section:

    .pzmodal .pzbtn-close:hover { background-color: transparent !important; transform: none !important; color: #000 !important; /* or desired color */ }

2. Icon Font or Image Shift

• Cause: The close icon is implemented using a font (like Font Awesome) or image that gets misaligned on hover.

• Fix:

  • Set a fixed height/width and alignment:

    .pzbtn-close { width: 20px; height: 20px; text-align: center; line-height: 20px; }

3. Transition or Animation Effects

• Cause: A CSS transition or animation is causing a shift or flicker effect.

• Fix:

  • Disable transitions on hover:

    .pzbtn-close { transition: none !important; }

  • .pzbtn-close:hover{background:none !important;}

4. Pega Skin Configuration

• Cause: Your Pega skin may define different styles for hover states.

• Fix:

  • Go to App Studio > Theme or Dev Studio > Skin rule.

  • Look under the modal or button control styles and adjust the hover state.

5. Different Browsers or Zoom Settings

• Cause: Browser-specific rendering bugs, especially with high zoom.

• Fix:

  • Test in multiple browsers.

  • Avoid using percentage-based paddings or margins if unnecessary.

Hope this will help. :)