Moving The Searchbox Into The Top Ribbon v4.master

August 27, 2010

I have seen that some people have difficulties with moving the searchbox position to the top ribbon in SharePoint 2010 v4.master file.

Two months ago I did this for a client to have more space for all the subsites.

Here is what I have done to let it work in IE 7 - 8 and Firefox.

1
2
3
<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
  <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
</asp:ContentPlaceHolder>

The first thing I have done is replacing the searchbox control in the masterpage to the top ribbon, besides the user menu control. You can search for “PlaceHolderSearchArea” and cut this section.

After you have cut this section search for the div with an id of “s4-trc-container-menu” (this is where the user menu control is placed). Above this div you should create a new div and place your copied code in this section. It should look like this:

1
2
3
4
5
<div class="searchField" id="s4-searcharea">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
  </asp:ContentPlaceHolder>
</div>

Right now it still does not work.

Searchbox position to top ribbon problems
Searchbox position to top ribbon problems

Now we start adding the css code and it isn’t that hard for IE 8 and Firefox.

1
2
3
4
.searchField {
  float: left;
  padding-top: 10px;
}

In Internet Explorer 7 it still looks the same as before we added the css. So we need to add some css that targets only IE 7. The trick here is to give the searchbox div a width and that’s it.

1
2
3
4
/* IE7 Adjustments */
.searchField table.s4-wpTopTable{
  *width: 200px;
}

SharePoint Foundation Solution

When you are working in a SharePoint Foundation environment, you will notice that the previous approach gives a small problem.

SharePoint Foundation Search Image Problem
SharePoint Foundation Search Image Problem

This problem occurs because the SharePoint Foundation search box uses an additional css class to apply the styling.

To solve this, you need to add the “s4-search” class in the div that you created in the previous section. It should look like this for the SharePoint Foundation master page:

1
2
3
4
5
<div class="searchField s4-search" id="s4-searcharea">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
    <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
  /asp:ContentPlaceHolder>
</div>

Right now it should work, but a small change to the css needs to be made. Because the “s4-search” class has its own css paddings, the paddings from our “searchField” class overwritten.

SharePoint Foundation Search Box Padding
SharePoint Foundation Search Box Padding

Add !important to your css padding-top attribute. The css class looks like this:

1
2
3
4
.searchField {
  float: left;
  padding-top: 7px !important;
}

The result looks like this.

SharePoint Foundation Result
SharePoint Foundation Result

Result

Here are some screenshots of the different browsers.

Searchbox position to top ribbon Firefox
Searchbox position to top ribbon Firefox
Searchbox position to top ribbon IE8
Searchbox position to top ribbon IE8
Searchbox position to top ribbon IE7
Searchbox position to top ribbon IE7

Update

Added SharePoint 2010 Foundation Section: 22/06/2011

A commenter called Dave pointed me out that there was a problem when you want to apply this to a SharePoint 2010 Foundation environment. The problem that arises with the SharePoint Foundation master page is that the search image is displayed below the search box.

SharePoint Foundation Search Image Problem
SharePoint Foundation Search Image Problem

Comments

comments powered by Disqus