SharePoint CSS Trick: Align your Search Inputs

I banged my head on this one for awhile and finally just had to pick apart the View Source code for a MOSS page….

If you are creating a custom Master Page for MOSS 2007 and use the Search user control (<SharePoint:DelegateControl runat=”server” ControlId=”SmallSearchInputBox”/>) you may have issues getting the search inputs to align to the right.  That is how it is in the default look and feel, yet when you use this user control in your custom master page it mysteriously scoots over to the left.    I don’t choose to use the default code, so I was determined to figure out why I wasn’t able to shift the search over to the right, despite trying floats, divs, table alignments and ancient rain dances.

I finally found the culprit to be an empty table cell to the right of the search inputs with a width set to 100%.  Gak!  No wonder!   So copy this style into your custom CSS styles to align your search to the right:

.ms-sbLastcell,.ms-rightbodysectionsearchbox {
width: 0;
padding: 0px;
margin: 0px;
}

And then I suggest adding this as well, or you may end up with search inputs that are spaced apart across the screen:

.ms-sbtable-ex {
width: 0;
}

You can now align the search however you need in your Master Page.

If you aligning your inputs to the right, I suggest adding this code:

.ms-globalTitleArea table td table  {
text-align: right;
float: right;
}

The Text-align takes care of IE, and the float handles Firefox.

**** PLEASE NOTE this is for a MOSS site, not for sites running on a WSS only server. ****
If you are having issues aligning your search in a WSS only site, try this:

.ms-globalTitleArea  table td {
text-align: right
}

10 thoughts on “SharePoint CSS Trick: Align your Search Inputs”

  1. Hi, Heather:We have set up so that a few child farms are subscribing to the SSP of a paent farm where the search service is one part. I am trying to accomplish two things1) The search button on the child farms should display the search result in a new browser window instead of the current window since the result page is from the parent farm and not the child farm, user will be lost if they continue with other searches.2) There is an advanced search link is next to the search box on all child farm pages. We can control the URL through Site Collection admin – search settings but we have not found out how to make it also display the result in a new window with the same reason as #1.Are these also controlled via CSS? Any help you can provide will be greatly appreciated.Regards,Ben

  2. We installed and successfully got the basic search working, but then it suddenly stopped working and displays the fllowing error message. Does anyone have any ideas. I checked that search is still activated and also restarted the search service.No results matching your search were found. Check your spelling. Are the words in your query spelled correctly?Try using synonyms. Maybe what you’re looking for uses slightly different words.Make your search more general. Try more general terms in place of specific ones.Try your search in a different scope. Different scopes can have different results.

  3. I wish I could get the search inputs to display at all!.we created one site collection for use as a company intranet and the search inputs show OK. Now we are creating another site collection in a development environment but the search input does not display at all.We are all very new to Sharepoint 2007 and are gradually finding our way in the dark.Please (_please_) could someone help us to display the search inputs?Thanks very muchCarl

  4. This is almost the same what I’m looking for. The next question is: how can I stretch that Search input so that it can fit longer strings to search for?Thanks in advance.

  5. I was not able to get the following to work…It solved the spreading accross the page problem – but went back to being left aligned.ms-sbtable-ex { width: 0;} BUT – I added the float (from the globalTitleArea suggestion) into the sbtable class and it seems to have fixed it – .ms-sbtable-ex { width: 0; float: right;}Hope that helps someone….

  6. We installed and successfully got the basic search working, but then it suddenly stopped working and displays the fllowing error message. Does anyone have any ideas. I checked that search is still activated and also restarted the search service.No results matching your search were found. Check your spelling. Are the words in your query spelled correctly?Try using synonyms. Maybe what you’re looking for uses slightly different words.Make your search more general. Try more general terms in place of specific ones.Try your search in a different scope. Different scopes can have different results.Please help me some possible solution to resolve this Problem ASAP .Regards Kanupriya Chourey

  7. Hi, could anybody help me with a guide on how to show a text (search..) inside the search box in MOSS2007?Thanks in advance

  8. I’ve found a solution albeit a slightly different approach.In my design I use a lot of div and float to position the elements. The search box is aligned right in modern browsers except IE6, because of the “width: 100%” problem you mentioned above.My solution is to enforce the width only for IE6 by using CSS selector:* html .header-right {width: 360px;} /* IE6 Selector */It seems to do the trick.

Comments are closed.