This project is read-only.

bootstrap 3 problem with search box magnifying glass icon does not appear - Resolved

Sep 4, 2014 at 7:25 AM
In the bootstrap 2 and 3 for sharepoint, boostrap-custom.css has the below code
* [class^="col-"] img {
    max-width: 100%; /*for images inside span grid*/
}
It makes the search box magnifying glass icon does not appear in both small searchbox and result page search box.
Solution is change the above code to
* [class^="col-"] img {
    max-width: none; 
}
Sep 8, 2014 at 5:47 PM
Hi,

That catch with your replacement code is that images within a col is now no longer responsive. My suggestion is that you leave max-width 100% for all images within col- then set max-width to none for just those OOTB images such as the search button, down arrow, etc.

This was the approach of the non-wsp solutions.

Eric
Sep 9, 2014 at 1:20 AM
Edited Sep 9, 2014 at 1:20 AM
Hi Eric,

Thanks for your comment. I have updated to the below code to get the magnifying glass showing.
#searchImg.ms-srch-sb-searchImg,#searchImg.ms-srch-sbLarge-searchImg {
max-width: none;
}
unchanged code:
* [class^="col-"] img {
    max-width: 100%; /*for images inside span grid - */
}
Sep 9, 2014 at 1:42 AM
Thank you for sharing the updated CSS. That is the general idea. You will likely find other SP images/icons that are out of whack somewhere, I suggest appending to your first css block.

Eric