Coveo for Sitecore 5 is now available!

Coveo Sort Components Are Stacked in an MVC Search Page

Coveo for Sitecore (April 2017)

Coveo for Sitecore (June 2017) 

Symptoms

With the April 2017 release, when you have several sort component on an MVC-based search page, the components are stacked vertically instead of being distributed horizontally.

Cause

The April 2017 introduces a new version of the JavaScript Search Framework (v1.2359.7) along with some changes to the search pages CSS files relative to this update. The sort component placeholder being in a div in the SearchView.cshtml file is causing the components to stack vertically. This <div> was previously introduced to address a rendering issue and is no longer necessary.

<div class="coveo-sort-section">
   <div>
       @Html.Sitecore().Placeholder("coveo-sorts-mvc")
   </div>
</div>

Resolution

You need to manually update your search pages to remove the <div> around the coveo sort component placeholder. Follow these steps to resolve the problem:

Step 1 - Make sure the SearchView.cshtml file has been updated correctly:

  1. Open a file explorer and navigate to C:\inetpub\wwwroot\[yourSitecoreInstance]\Website\Views\Coveo.

  2. Open SearchView.cshtml in a text editor.
  3. Locate the line containing @Html.Sitecore().Placeholder("coveo-sorts-mvc") and make sure it looks like the following code block:

     <div class="coveo-sort-section">
         @Html.Sitecore().Placeholder("coveo-sorts-mvc")
     </div>
    

    If not, remove the additional <div>...</div>

Step 2 - Manually remove the pair of div tags from your custom search views. For each custom search view that you have:

  1. Open the file in a text editor.
  2. Locate the following code block:

     <div class="coveo-sort-section">
         <div>
             @Html.Sitecore().Placeholder("coveo-sorts-mvc")
         </div>
     </div>
    
  3. Replace it with the following code block:

     <div class="coveo-sort-section">
         @Html.Sitecore().Placeholder("coveo-sorts-mvc")
     </div>
    
  4. Save and then close the file.