Monday, November 5, 2012

Fixing the People Search Box in SharePoint 2010

There are (at least) two CSS issues with the People Search web parts in SharePoint 2010 OOTB (out-of-the-box). Luckily, these are fairly easy to fix. I have run across other bloggers who use way too much CSS for this. What I provide here is lean and should be bulletproof.

The Issues

First, the search box font size is entirely too small:
screen shot
People Search Box
Next, the background element for "Search Options" does not expand to contain the search options form (notice also that the font size is too small for the labels):
screen shot
People Search Box with Search Options
The font size issue is the result of too many nested elements with the style "font-size: .7em;" applied and is a problem with the SharePoint code files themselves.

The background issue with Search Options is because that element is not properly floated. Its child element (the form table) is floated, but modern browsers require the wrapping element to be floated as well. This is called "float to fix" in CSS Web Standards parlance.

The Fix

If you are doing any branding with your SharePoint 2010 environment at all, you should be using an external CSS file that is referenced in your master page. If you are not, then this solution will work equally well inside your master page's <head/> section inside a <style/> block.

This is the CSS code you need:

/* Fix People Search Web Part font size */
.ms-sbtablealt {
    font-size: 8pt;
}
/* Fix People Search Options wrapper */
.ms-sbtablealt .psrch-OptionsContainer {
    float: left;
}
.ms-sbtablealt .psrch-OptionsContainer .psrch-OptionsLayoutTable {
    margin-right: 0;
}

Once these CSS rules have been applied, your People Search input field and Search Options will be fixed:
Fixed People Search Box
Fixed Search Options

3 comments:

  1. This was EXTREMELY helpful. Lots of info out there on the font size issue but nothing on the Options wrapper. Thank you Kevin!

    ReplyDelete
  2. Man I love you. Your article probably saved me a day.

    ReplyDelete