Fix: Search Box Suggestions Layout Problem When Used Outside a Search Center

Some time ago, I wrote about a layout problem when using the People Search Box Web Part outside a SharePoint Search Center. Other layout problems occurs when you enable Query Suggestions for the Search Box Web Part.

Show image

What I experienced is that two different layout problems occur:

1. When Search Suggestions are enabled for the Search Box in the Top Navigation Menu;
2. When Search Suggestions are enabled for a Search Box on a page.

Fix Search Suggestions When Used in Top Navigation Menu

Problem

Show image

Solution

The following CSS code solves the layout problem.

1
.srch-AutoCompContainer {
2
  display: block !important;
3
  top: 88px !important;
4
  min-width: 218px;
5
}
6

7
.srch-AutoCompListItem,
8
.srch-AutoCompHListItem {
9
  display: block !important;
10
}

The CSS top attribute value depends on the height of the s4-titlerow.

Show image

Fix Search Suggestions When Used on a page

Problem

Search Suggestions are being displayed on top of the Search Box.

Show image

Solution

The following CSS code solves the layout problem.

1
.srch-AutoCompContainer {
2
    top: 34px;
3
}
4

5
.srch-AutoCompList {
6
    min-width: 218px !important;
7
}

Show image

Changes

CSS update: 02/11/2011

Changed the width parameter to min-width. This allows the suggestion box to automatically expand based on the suggestion text size.