Responsive search panel

by niki4810

HTML

<script src="https://rawgithub.com/ivaynberg/select2/master/select2.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/ivaynberg/select2/master/select2.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="row-fluid">
    <div class="span2"></div>
    <div class="span10">
        <div class="searchContainer clearfix">
            <div class="searchButtons">
                <button class="btn">Add Remove criteria</button>
                <button class="btn">Load</button>
                <button class="btn">Clear</button>
                <button class="btn btn-primary">Search</button>
            </div>
            <div class="searchPanel clearfix">
                <div class="searchTerm">
                    <label for="AccessCode">Submission id #</label> <span>
        <input type="text" class="form-control" name="accessCode" value=""  placeholder="" ></input></span>

                </div>
                               <div class="searchTerm">
                    <label for="AccessCode">Access CodeThat is very lo0000000000000000ng:</label> <span>
                    <input type="hidden"class="myenum" ></input></span>
                </div>
                <div class="searchTerm">
                    <label for="AccessCode">Branch Wholesaler Name</label> <span>
        <input type="text" class="form-control" name="accessCode"  value=""  placeholder="" ></input></span>

                </div>
                <div class="searchTerm">
                    <label for="AccessCode">Parent Wholesaler ID</label> <span>
        <input type="text"  class="form-control" name="accessCode"  value=""  placeholder="" ></input></span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

//37 is one break point *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.span10{
   padding-top:10px; 
   padding-right:30px; 
}
div.searchContainer{
    border: 1px solid #d8d8d8;
    padding:7px;
}
div.searchButtons{
    padding : 5px;
    padding-top:0;
}
div.searchButtons button{
    margin : 1px;
}
div.searchPanel {
    overflow: hidden;
}
div.searchTerm {
    padding:0.2em;
    float:left;
    width:33.33333333333333%;
    min-height:45px;
    overflow:hidden;
    padding-bottom:0;
}
div.searchTerm label {
    font-weight:normal;
    font-size: 12px;
    float:left;
    word-wrap:break-word;
    width:50%;
    margin:0;
    text-align:right;
    padding-right:5px;
    padding-top:5px;
}
div.searchTerm span {
    display: block;
    overflow: hidden;
}
div.searchTerm input {
    width:100%;
    margin:0;
    /* height:30px; */
}
@media only screen and (max-width: 1170px) {
    div.searchTerm {
        width:50%
    }
    div.searchTerm label {
        width:30%;
        padding-top:0;
    }
}
@media only screen and (max-width: 630px) {
    div.searchTerm {
        width:100%;
    }
}

JavaScript

$(function () {
    $(".myenum").select2({
        width: "100%",
        data: [{
            id: 0,
            text: 'enhancement'
        }, {
            id: 1,
            text: 'bug'
        }, {
            id: 2,
            text: 'duplicate'
        }, {
            id: 3,
            text: 'invalid'
        }, {
            id: 4,
            text: 'wontfix'
        }]
    });
});