Hide SharePoint Hover Panel for small screens

In Dev, Display Templates, Featured, Office 365, Responsive, SharePoint by del0 Comments

Introduction:

This is a super quick tip to help make SharePoint Search (Online or on-premises) more responsive on tablets and mobile devices.

Hover panel gets cut off on smaller screens:

We are going to add a meta tag to our page to enable media queries, then hide the hove panel when the screen size is below a certain size. This is all done by adding a few lines of code to our Search Display template.

First, a few caveats.

I use Internet Explorer (11) so I can open the display templates in Windows Explorer (remember to add your SharePoint site to your Trusted Sites).
I use Visual Studio Code (download for free) to do all my coding and editing.
This is a quick and simple solution with no error trapping, there is always room for improvement.
Media queries do not work in IE 8 and earlier (but you are not using IE8, are you?)

Setup:

Navigate to your SharePoint Search site, something like : https://*your domain*.sharepoint.com/search/
Navigate to your Master Pages location in Site Settings

Select Open with Explorer from the Library ribbon

In Windows Explorer navigate to the folder
https://.sharepoint.com/search/_catalogs/masterpage/Display Templates/Search

Display Templates

There are many display templates within this directory. Each result type has its own Display Template (Word, Excel, Web page, PDF etc). The easiest way to control your search results is to use a Display Template that is called for every search item. In our case we can use the Item_CommonItem_Body.html file. Never edit the js file. The js files is controlled by SharePoint. Each change you make to the html file is converted into the corresponding js file.

At this point it is recommended to save a copy of the Item_CommonItem_Body.html file before we make any changes.

Open the Item_CommonItem_Body.html file in your favourite text editor. This will involve right clicking on the file and selecting your editor from the list or choosing Open with…

The Display Template is made up of HTML and javascript. It can be a bit daunting initially, but we do not need to worry about that for now. We are just going to call to external files that willdo the work for us.

Media Queries:

Return to Windows Explorer and create a new text file, rename it to CustomSearch.css. Open the CustomSearch.css file in your text editor and add the following code:
@media only screen and (max-width: 1026px) {
.ms-srch-hover-outerContainer {
display: none !important;
}
}

Save the file.

This simply means that if the browser windows is smaller than 1026 pixes then the hovel panel (ms-srch-hover-outerContainer) should be hidden. For CSS purests, yes, we are using the !important parameter, only because we do not have access to the inline CSS that SharePoint sets.

To make this work we need to tell the browser to user media queries. We need to add the viewport meta tag to the page. Microsoft strongly advises against editing Master Pages in Office 365, so we will use a bit of javascript to “inject” the tag when the page loads.

JavaScript:

Return to Windows Explorer and create a new text file, rename it to CustomJS.js. Open the CustomJS.js file in your text editor and add the following code:

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

Save the file.

 

Including the scripts:

Go back to your Item_CommonItem_Body.html page and insert these two lines of code just below the body tag.

$includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Search/CustomSearch.css");
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Search/CustomJS.js");

Save your file.

The end pproduct:

Navigate to your SharePoint Search site

Enter a search term to bring back some documents.

Full screen view:

Small screen view:

And there you have it. For tablets and mobiles devices the hover panel will be hidden and makes the search experience much neater.

Have you found any other ways to achieve the same thing? Let me know in the comments.

Leave a Comment