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
 2
 3
 4
 5
 6
 7
 8
 9
10

.srch-AutoCompContainer {
	display: block !important;
	top: 88px !important;
	min-width: 218px;
}

.srch-AutoCompListItem,
.srch-AutoCompHListItem {
	display: block !important;
}

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

Show image

Solution

The following CSS code solves the layout problem.

1
2
3
4
5
6
7

.srch-AutoCompContainer {
    top: 34px;
}

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

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.