Fix: People Search Box Has Layout Problems When Used Outside a Search Center

July 8, 2011

A colleague discovered a layout problem when he was using the People Search Box Web Part outside a SharePoint Search Center.

When you add the People Search Box Web Part to your page, the layout looks fine.

People Search Box
People Search Box

The problem arises when you click on the Search Options link.

People Search Box Layout Problem
People Search Box Layout Problem

As you can see, the property box is shown with a transparent background and the labels are almost unreadable.

Solution

To solve this problem, you could add the following CSS styles to your custom stylesheet or inside the master page itself.

1
2
3
4
5
6
.psrch-OptionsContainer {
  font-size: 8pt;
  height: 130px;
  margin-top: 20px;
  width: 355px;
}

Result

People Search Box With CSS Fix
People Search Box With CSS Fix

Comments

comments powered by Disqus