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

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.

| improve this answer | |
  • works like a charm :) Thanks. I keep forgetting to use !Important – Aslan Mar 15 '17 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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