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

August 22, 2011

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.

Query Suggestions
Query Suggestions

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

Search Suggestions Problem in the Top Navigation Menu
Search Suggestions Problem in the Top Navigation Menu

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.

Search Suggestions Fixed in the Top Navigation Menu
Search Suggestions Fixed in the Top Navigation Menu

Fix Search Suggestions When Used on a page

Problem

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

Search Box on a page
Search Box on a page
Suggestions are displayed on top of the search box
Suggestions are displayed on top of the search box

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;
}
Search Suggestions fixed on a page
Search Suggestions fixed on a page

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.

Comments

comments powered by Disqus