CODEWITHSUNDEEP
htmlcssbutton
Nelson Silva
Nelson Silva

Reputation: 439

Issue with bootstrap button

So, Im trying to implement a simple search box with a search button (bootstrap http://bootsnipp.com/snippets/featured/stylish-search-form), but Im having some issues with the button. When I apply the html and css from bootstrap, what I get is an hidden button with no magnifying glass. When I mouse over the area where it should be, all I have is a small rectangle. Also, any idea why my div.container and div.span 12 are not align at center ?

[no search button]https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.19.14.png! [div span-12]https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.20.17.png! [div container]https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.20.19.png!

My html:

<div class="container">
  <div class="row">
        <div class="span12">
            <form id="custom-search-form" class="form-search form-horizontal">
                <div class="input-append span12">
                    <input type="text" class="search-query" placeholder="Search">
                    <button type="submit" class="btn"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
  </div>
</div

>

My css:

#custom-search-form {
        margin:0;
        margin-top: 5px;
        padding: 0;
    }

    #custom-search-form .search-query {
        padding-right: 3px;
        padding-right: 4px \9;
        padding-left: 3px;
        padding-left: 4px \9;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */

        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #custom-search-form button {
        border: 0;
        background: none;
        /** belows styles are working good */
        padding: 2px 5px;
        margin-top: 2px;
        position: relative;
        left: -28px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .search-query:focus + button {
        z-index: 3;   
    }

Upvotes: 2

Views: 563

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

The example you found requires Bootstrap 2.3.2 and doesn't work in Bootstrap 3. See my example, it works when I call Bootstrap 2 (I called css and js) and I removed your css so you can style from a nice clean base:

/*
#custom-search-form {
        margin:0;
        margin-top: 5px;
        padding: 0;
    }

    #custom-search-form .search-query {
        padding-right: 3px;
        padding-right: 4px \9;
        padding-left: 3px;
        padding-left: 4px \9;
*/
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
/*
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #custom-search-form button {
        border: 0;
        background: none;
*/
        /** belows styles are working good */
      /*  padding: 2px 5px;
        margin-top: 2px;
        position: relative;
        left: -28px;
*/
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
/*
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .search-query:focus + button {
        z-index: 3;   
    }
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
        <div class="span12">
            <form id="custom-search-form" class="form-search form-horizontal">
                <div class="input-append span12">
                    <input type="text" class="search-query" placeholder="Search">
                    <button type="submit" class="btn"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
  </div>
</div

Upvotes: 2

Related Questions