Wider refinement panel - with no access to backend

  • Article

I had the challenge that the standard search refiners were not wide enough to accomodate the values we had coming back. In the "Refinement" web part, you can increase the number of characters that are displayed. So I started with that. Here is a similar scenario using the downloadable demo VM from Microsoft:

As you can see, the site names get trimmed, which doesn't look too good. If you edit the web part, you can increase the number of characters to display:

Now, the strings are no longer trimmed. But if they are too long, a line break is inserted, which can look awkward, too. (And it was much worse in our case, since the strings were so long that they extended outside the web part!)

There is no setting for increasing the width of the web part itself, and we did not have access to edit the page layout or CSS files. So, we turned to JavaScript for a quick and easy solution! We added a "Content Editor" web part to the top of the page, and removed it's styling, so that it was invisible to the user. Then we added the following lines of code:

 <script language="javascript">
 var existing = window.onload;
 

  /* Needed to make sure existing SharePoint onload JavaScript still gets executed! */
 window.onload = function() {
 
 if(typeof(existing) == "function"){ existing(); }
 /* resize refiner width */
 document.getElementById('SRCHREF').style.width="250px"; 
 } 

 </script>

There were three challenges to getting the above code to run properly:

  1. Finding out that 'SRCHREF' was the element id of the refinement panel
  2. Making sure the code ran after the page was fully loaded, since the refinements are displayed asyncronously
  3. Making sure existing "onload" code continued to run, otherwise the ribbon functionality was broken

And now, everything looks just the way we want: