Renderings move around in the "Select a Rendering" window on mouse hover


Description

The renderings might move around in the pop-up Select a Rendering window when hovering over or selecting a rendering. The issue occurs in the Experience Editor when adding a component to a page, only if the zoom level of the browser page is other than 100%.

Solution

To address the issue:

  1. Open the [your_website]\sitecore\shell\Themes\Standard\Default\SelectItemWithThumbnails.css file.
  2. Remove the border and padding attributes from the elements a.scItemThumbnail:hover and a.scItemThumbnailSelected, as shown below:
    a.scItemThumbnail:hover
    {
      background-color: #E8F5FD;
      border: 1px solid #D8F0FA;  
      padding: 4px 11px;
      text-decoration: none;
    }
    
    a.scItemThumbnailSelected  
    {
      background-color: #D5EFFC;
      border: 1px solid #99DEFD; 
      padding: 4px 11px; 
    }
  3. Save the changes and clear the browser cache.