This project is read-only.

Sharepoint 2013 Search page item hover problem

Feb 4, 2014 at 10:28 PM
In SharePoint 2013, I'm using the bootstrap 3 master page and styles to test some stuff out and there is a strange bug on the search results page. When hovering over an item in the search results, the "hover" popup is positioned wrong. I have taken a quick look but haven't found a way to fix this yet. The main problem is that there seems to be some javascript that places inline styles on the hover box to position it.

You can see the hover positioned too far to the right in this snap shot.
Image

Here is the page if I scroll over to the right in my browser.
Page Scrolled to the right
Feb 5, 2014 at 10:19 PM
This one is another pain point with SP OOTB branding. The hover panel is placed on the page by SP OOTB JS that attempts to determine a hover panel's location based on a particular spot on the screen. We almost always have a wrapper container that has its position set to "relative", thus the inline styles that SP OOTB JS sets for the panel's location is off.

My general technique around this is to force the hover panel to always have a specific left and top value based on a relative position of that hover panel's particular result item. There are some other issues that may appear when you do this, but a few minutes with Firebug and a few lines of CSS and you will be all set.

Eric
May 6, 2014 at 3:28 PM
Any solution for this, I was not able to fix it.
May 21, 2014 at 9:44 AM
Edited May 21, 2014 at 9:50 AM
Could you please share an example on how you fixed this? I guess it's a combination of JS and CSS? PS: thanks for this awesome project! :-)
May 21, 2014 at 5:39 PM
HI all,

Check out the search pages at:
https://www.calvet.ca.gov/
http://www.sjcc.edu/
http://www.sjeccd.edu/

Use Firebug and you should be able to get any of the css we used to move the panel around.

Eric
May 21, 2014 at 11:07 PM
Thanks for the reply, Eric! Unfortunately, I wasn't able to see a fixed hover panel on the sites you mentioned, see screenshot below where I'm hovering the "Women Veterans" link. (I tried them in both Safari and Chrome for Mac) Is it because I'm opening them on a MacBook Air with relatively low screen resolution?

Image
Jun 2, 2014 at 3:53 AM
I don't think it's a Mac problem. The search screens are all off for me as well on Windows in IE11 and Chrome.
Jun 3, 2014 at 9:59 AM
Edited Jun 3, 2014 at 10:00 AM
We had this same issue until Microsoft released the (I believe April update?)

The fly-outs are working properly again. So maybe if you are not using Online update to the latest version?
Aug 12, 2014 at 3:36 PM
Edited Aug 12, 2014 at 3:51 PM
Ok I really don't like the way other people add their custom CSS to 'ghetto solve' the hover panel problem.

So I decided to take a few minutes to debug the code. I just went trough 6800 lines of bootstrap.css because I saw that removing bootstrap.css resulted in a good working search item hover panel.

After removing the first 1000 lines the search hover panel was positioned the right way. So the problem had to occur in the first 1000 lines.

On line 782 I found the problem position: relative;
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
  /*position: relative;*/
  min-height: 1px;
  padding-right: 0px;
  padding-left: 0px;
}
Fail
Image

Success
Image

The position: relative; is the problem. Does anyone see problems with removing this property? I don't see any negative changes on my heavily branded SharePoint 2013 portal for now.

Let me know! Thanks.
Aug 12, 2014 at 5:38 PM
OOTB the hover panels, with a class of "ms-srch-hover-outerContainer", are absolutely positioned relative to the first parent with a position of relative or absolute. OOTB, that is our #s4-workspace div. Some JS SP provides determines the position of each hover panel and sets an inline top and left property, positioning each hover panel in the right spot again relative to #s4-workspace. We are amongst friends here, let's be honest, this is a hack in and of itself.

As you found the Bootstrap framework sets each col container to have a position of relative as well. You likely will not run into any issues removing the position style, although I think you would if you started to use more of the includes extras found in the framework. I believe all of the col containers are also set to relative to make positioning of elements within each col most straightforward.

To directly answer your questions, you likely will not run into any problems in desktop view when removing position: relative from the framework. You will want to do something about smaller viewports though using media queries.

My preferred solution is to !important override the left and top positions of each panel and instead make them relative to its particular search item row container, ".ms-srch-item".

Eric
Aug 20, 2014 at 4:20 PM
@basjacobs: thanks for your solution - it works for me aswell! :-) However, this have introduced for me issues with positioning (and z-index) of some elements. For example, I experienced the dropdown for the global menu to be placed behind the quicklaunch menu. (see example below) I fixed this by giving the quicklaunch z-index: 0.

Image

@eoverfield: could you please paste an example on how you solved this the way you describe?
Aug 28, 2014 at 6:54 PM
Hi,

I went with a mobile first strategy, forcing the hover panel to hide for all viewports, then for larger ones, i.e. desktop, allow the hover to show and position each hover panel relative to its item. A few additional styles to position a hover panel's arrow as well.

You might end up changing the left property of the hover panel outer container to match your item's width. SharePoint OOTB sets a width of the each search item that you may want to change.

Anyhow, only CSS is needed for this method.
.ms-srch-hover-outerContainer {
    display: none !important; /*force hiding for mobile first, small viewports*/
}

/*for larger viewports, we can show allow the hover panel to show*/
@media (min-width: 992px) {
    .ms-srch-item {
        overflow: visible;
        position: relative; /*will cause hover panel to position relative to its item*/
    }
    .ms-srch-hover-outerContainer {
        display: block !important; /*force override of mobile first hide*/
        top: 0px !important; /*force override of top*/
        left: 530px !important; /*This property may need changing depending on width of item*/
    }
    
    /*move the hover panel arrow to match design*/
    .ms-srch-hover-arrowBorder {
        top: 20px !important;
    }
    .ms-srch-hover-arrow {
        top: 20px !important;
    }
}
Jan 22, 2015 at 12:38 PM
Edited Jan 22, 2015 at 12:39 PM
Hey All, wasn't sure if I should start a new post or add to this one, as my issue seems similar... I should point out that I am using the latest version of this project i don't get any of the placement issue's on search results as described by the first poster, has this been fixed and the project updated?

Currently i have an 2 issues with my hover panel
  1. When i move from the item to Hover panel, the hover panel only stays "open" for 2/3 seconds then closes meaning i have to keep hovering back to the item to open the hovel panel again.
  2. My hover panels all work fine until i scroll down the page, then the items at the top of the page no longer produce the hover panel. If i scroll back up the page then they start to work again. I noticed that the /position: relative;/ fix mentioned above fixed this issue but I'm pretty sure I need this to remain in the CSS
I should point out that I am using my own display templates in a Content Search Web part. Any input would be appreciated.