search panel responsive 2

by niki4810

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="searchPanel">
    <div class="searchTerm">
        <label>Submission #</label>
        <input type="text"></input>
    </div>
<div class="searchTerm">
                <label>Submission That is verry long</label>
        <input type="text"></input>
    </div>
    <div class="searchTerm">
                <label>Branch Wholesaler#</label>
        <input type="text"></input>
    </div>
    <div class="searchTerm">
                <label>Submission #</label>
        <input type="text"></input>
    </div>
    <div class="searchTerm">
                <label>Submission #</label>
        <input type="text"></input>
    </div>
    <div class="searchTerm">
                <label>Submission #</label>
        <input type="text"></input>
    </div>
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
.searchTerm {
    float:left;
/*     border:1px solid; */
    padding: 1px;
    width:320px;
    margin : 0 5px 0 5px;
}
.searchTerm label{
    display : inline-block;
    vertical-align : middle;
    width:40%;/* 31.25%; */
    text-align:right;
}
.searchTerm input{
    display:inline-block;
    width:50%;/* 62.5%; */
    vertical-align: middle;
    box-sizing: content-box;
}
@media only screen and (max-width:510px) {
    .searchTerm {
        width : 100%;
    }
}

JavaScript

var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;

$('.searchTerm').each(function () {

    $el = $(this);
    topPostion = $el.position().top;

    if (currentRowStart != topPostion) {

        // we just came to a new row.  Set all the heights on the completed row
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }

        // set the variables for the new row
        rowDivs.length = 0; // empty the array
        currentRowStart = topPostion;
        currentTallest = $el.height();
        rowDivs.push($el);

    } else {

        // another div on the current row.  Add it to the list and check if it's taller
        rowDivs.push($el);
        currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

    }

    // do the last row
    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
    }

});