Search Box Width: Input.search-query CSS conflict

Hi Tuan,

I have Joom Donation 3.8 running on a J 3.3.6 site and I am having an input.search-query CSS conflict.

On my JD form page, the search box in the left column is too wide. On all other non-JD pages, it is the correct width, but when on the form page it extends to the right across into the mainbody area of my template.

Can you please take a look and suggest a fix?

I had to override the bootstrap.css border-radius style in the following class because it was making my search box have rounded ends.

input.search-query {
padding-right: 14px;
padding-left: 14px;
margin-bottom: 0px;
/* border-radius: 15px; */
border-radius: 0px !important;
}

If I added a width: 120px !important; it made all of the form fields in the JD form 120px wide.

Here is the CSS in our template for the search box:

#mod-search-searchword.inputbox {
border: 0px solid #FFF;
margin-top: 10px;
}

Here is the link to the form page:
www.nncc.us/site/member-information/application

Visit any other page in the site and you'll see that the search box is the correct width.

Thanks for your help.
Azurelink

Never mind, I just added a width attribute to our template style:

#mod-search-searchword.inputbox {
border: 0px solid #FFF;
margin-top: 10px;
width: 120px !important;
}

Great. Thanks for sharing the fix

Tuan