How to change hover panel position

Question

I am using Search Results page and I would like to change the position of the hover panel. The code is generated on the fly by SharePoint. I just want to change left: 823px; to left: 400px;

Here is the DIV generated by SharePoint.

<div class="ms-srch-hover-outerContainer" id="ctl00_ctl43_g_cb70b9a5_9e99_4a9f_ad75_19b16101f232_csr2_hover" style="left: 823px; top: 53.5px; width: 392px; display: block; visibility: visible;">      

Answer 1

You should be able to override the element using some CSS. However, as the style is inside the HTML you would need to use the !important parameter to override the inline style.

.ms-srch-hover-outerContainer {
left:400px !Important;
}

Or you should be able to fix it with some jQuery.

$( document ).ready(function() {
   $(".ms-srch-hover-outerContainer").css("left", "400px !important");
});

Be aware that there is some underlying script that checks the search results positions and add some pixels to left element to ensure that everything displays nicely.