Hey,

I put a searchbox webpart on my aspx page and need to reset the width of the search input field. The width depends on the screensize. Because I need to ensure backwards compatibility, I can't use css media queries, so I wrote a small JavaScript which gets the screensize and sets the width for the searchbox in dependency of the screensize. That works fine in general.

My problem is: I'm not able to set the width, because (so I think) it gets overriden by a css-class. My code looks like this:

var searchTable = $(".ms-bodyareacell .s4-search"),
	searchBox = $(".ms-bodyareacell .s4-search INPUT.ms-sbplain");
	
searchTable.width(1520);
searchBox.css("background-color", "#FF0000"); // just to ensure that the css-selector is correct
searchBox.width(1520);

Now the input field for the search has a red background but the width is still 170px. I think I need to remove the inline-style and each class which sets the width via css, so I added the following code:

searchBox.attr("class", "");

That don't work.

Where is my problem? What do I need to do to set the width for the searchbox?!

Thank you for each tip!

• Edited by Keulovic 3 hours 1 minutes ago

Hi

use a develop. tool  ( F12 in IExplorer for instance ) and check which class is applied on your element

Also set your style as mandatory ( using !important syntax )

Thank you for your answer.

I already use the developer tools and they tell me, that there are some classes which override the width attribute. But even when I remove all classes (with the method .attr("class", "") ) there is something which overrides the width.

I've tried this:

searchBox.attr("class", "");
searchBox.css("width", "1500px !important");

but it don't work, too.

Any other ideas?

1.Are you giving width in Javascript in right format ?

searchBox.width(1520);

searchBox.width("1520");

2.

The class which is overriding your existing class ,is it from Corev4? If yes then copy that class form there put in a css file, change width according to your requirement and give that file reference in your aspx page ex.

classTest

{

width:100px!important;

}

Hope this help.