SharePoint 2010 People Search Box Layout Problem

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.


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

  1. .psrch-OptionsContainer {

  2. font-size: 8pt;

  3. height: 130px;

  4. margin-top: 20px;

  5. width: 355px;

  6. }



People Search Box With CSS Fix

People Search Box With CSS Fix

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

Published by Aryan Nava

Founder of "BlockchainMind", CTO for two Blockchain startup during 2018, Cloud/DevOps Consultant and Blockchain Trainer

2 thoughts on “SharePoint 2010 People Search Box Layout Problem

  1. i am experiencing the same problem as you show above in my test farm that has a customized master page and style sheet, but not in my farm that has not been customized. The ootb farm works fine because it includes a background image in the psrc-optionscontainer class as well as a few other properties. I can’t figure out why thes properties are not showing up in my test envrironments style sheet. It looks like you are havnig the same problem, i think your suggestion is on the right track but there is something else going on that is causing our problems. please let me know if you have any thoughts on this and i’ll let you know what i find.

    1. Yes your correct. I developed custom search box to resolve this problem. If you want let me know.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: