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;">      

1 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.

  • works like a charm :) Thanks. I keep forgetting to use !Important
    – Aslan
    Mar 15, 2017 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.