THIS IS ARCHIVED DOCUMENTATION

Coveo Sort Components Are Stacked in an MVC Search Page

This is for:

Developer System Administrator

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\<YOUR_SITECORE_INSTANCE>\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.