"Advance Search"
Bootstrap 3.3.0 Snippet by niksgupt

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="input-group" id="adv-search"> <input name="ItemName" class="form-control" id="itemName" style="max-width: none;" type="text" placeholder="Item Name" value=""> <div class="input-group-btn"> <div class="btn-group" role="group"> <!--button type="button" class="btn btn-info" title="Item Name Search"><span class="fa fa-th-list" aria-hidden="true"></span></button--> <div class="dropdown dropdown-lg"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Advance Search"><span class="caret"></span></button> <div class="dropdown-menu dropdown-menu-right" role="menu"> <form id="requiredSearchForm" class="form-horizontal" role="form"> <div class="form-group form-group-sm"> <label for="itemNumber">Item Number</label> <div class="input-group input-group-sm input-group-xs"> <span class="input-group-btn"> <input name="itemNumber" class="form-control" id="itemNumber" type="text" placeholder="Item Number" value="" style="max-width:425px;"> <button class="btn btn-default" id="showItemNameDialog" type="button"> <span class="fa fa-search fa-fw" aria-hidden="true"></span> </button> </span> </div> </div> <div class="form-group form-group-sm"> <label for="productResponsibleUnit">Product Responsible Unit</label> <select name="PRU" class="form-control" id="productResponsibleUnit" placeholder="PRU"> <option value=""></option> <option value="FRR">Free Range</option> <option value="IFS">IKEA Food Service</option> <option value="IOS">IKEA of Sweden</option> </select> </div> <div class="form-group form-group-sm"> <label for="HFB">HFB</label> <select name="HFB" class="form-control" id="hfb" placeholder="HFB"> <option value=""></option> <option value="93">Administrative Area 93</option> <option value="94">Administrative Area 94</option> <option value="95">Administrative Area 95</option> <option value="06">Bathroom</option> <option value="60">Bathroom - UTG</option> <option value="11">Bed and bath textiles</option> <option value="04">Bedroom furniture</option> <option value="40">Children - UTG</option> <option value="09">Children´s IKEA</option> <option value="14">Cooking</option> <option value="16">Decoration</option> <option value="08">Dining</option> <option value="15">Eating</option> <option value="92">Family</option> <option value="99">Habitat</option> <option value="18">Home organisation.</option> <option value="12">Home textiles</option> <option value="96">IKEA Food</option> <option value="07">Kitchen</option> <option value="10">Lighting</option> <option value="01">Living room seating</option> <option value="05">Mattresses</option> <option value="50">Oasis & Seasonal</option> <option value="20">Other business opportunities</option> <option value="17">Outdoor</option> <option value="30">Rattan & Basketware - Not active</option> <option value="13">Rugs</option> <option value="19">Secondary storage</option> <option value="97">Services</option> <option value="02">Store and organise furniture</option> <option value="03">Workspaces</option> </select> </div> <div class="form-group form-group-sm"> <label for="paNumber">PA Number</label> <div class="input-group input-group-sm input-group-xs"> <span class="input-group-btn"> <input name="ProductAreaNumber" class="form-control" id="paNumber" type="text" placeholder="PA Number" value="" style="max-width:425px;"> <button class="btn btn-default" id="showProductAreaDialog" type="button"> <span class="fa fa-search fa-fw" aria-hidden="true"></span> </button> </span> </div> </div> <div class="form-group form-group-sm"> <label for="Issuer">Issuer</label> <input name="Issuer" class="form-control" id="issuer" type="text" placeholder="Issuer" value=""> </div> <div class="form-group form-group-sm"> <label for="grpIncludeUTG">Inclide UTG</label> <div class="btn-group btn-group-sm btn-group-xs" id="grpIncludeUTG" data-toggle="buttons"> <label class="btn btn-default btn-on btn-xs"> <input name="IncludeUTG" class="control-radio" id="IncludeUTG" type="radio" value="true">Yes </label> <label class="btn btn-default btn-off btn-xs active"> <input name="IncludeUTG" class="control-radio" id="IncludeUTG" type="radio" checked="checked" value="false">No </label> </div> </div> <div class="form-group form-group-sm"> <label for="dwpStatus">DWP Status</label> <div class="row"> <div class="form-group form-group-sm col-sm-3 col-md-3 col-lg-3"> <label for="grpDWPStatusCreated">Created</label> <div class="btn-group btn-group-sm btn-group-xs" id="grpDWPStatusCreated" data-toggle="buttons"> <label class="btn btn-default btn-on btn-xs active"> <input name="DWPStatusCreated" class="control-radio" id="DWPStatusCreated" type="radio" checked="checked" value="True">Yes </label> <label class="btn btn-default btn-off btn-xs"> <input name="DWPStatusCreated" class="control-radio" id="DWPStatusCreated" type="radio" value="False">No </label> </div> </div> <div class="form-group form-group-sm col-sm-3 col-md-3 col-lg-3"> <label for="grpDWPStatusPreliminary">Preliminary</label> <div class="btn-group btn-group-sm btn-group-xs" id="grpDWPStatusPreliminary" data-toggle="buttons"> <label class="btn btn-default btn-on btn-xs active"> <input name="DWPStatusPreliminary" class="control-radio" id="DWPStatusPreliminary" type="radio" checked="checked" value="True">Yes </label> <label class="btn btn-default btn-off btn-xs"> <input name="DWPStatusPreliminary" class="control-radio" id="DWPStatusPreliminary" type="radio" value="False">No </label> </div> </div> <div class="form-group form-group-sm col-sm-3 col-md-3 col-lg-3"> <label for="grpDWPStatusCompleted">Completed</label> <div class="btn-group btn-group-sm btn-group-xs" id="grpDWPStatusCompleted" data-toggle="buttons"> <label class="btn btn-default btn-on btn-xs active"> <input name="DWPStatusCompleted" class="control-radio" id="DWPStatusCompleted" type="radio" checked="checked" value="True">Yes </label> <label class="btn btn-default btn-off btn-xs"> <input name="DWPStatusCompleted" class="control-radio" id="DWPStatusCompleted" type="radio" value="False">No </label> </div> </div> <div class="form-group form-group-sm col-sm-3 col-md-3 col-lg-3"> <label for="grpDWPStatusExpired">Expired</label> <div class="btn-group btn-group-sm btn-group-xs" id="grpDWPStatusExpired" data-toggle="buttons"> <label class="btn btn-default btn-on btn-xs "> <input name="DWPStatusExpired" class="control-radio" id="DWPStatusExpired" type="radio" checked="checked" value="True">Yes </label> <label class="btn btn-default btn-off btn-xs active"> <input name="DWPStatusExpired" class="control-radio" id="DWPStatusExpired" type="radio" value="False">No </label> </div> </div> </div> </div> <div class="form-group form-group-sm"> <label for="FromDate">Status Date</label> <div class="row" style="margin-left:5px;"> <div class="form-group form-group-sm"> <label for="FromDate">From</label> <div class="input-group input-group-sm input-group-xs"> <span class="input-group-btn"> <input name="DWPStatusDateFrom" class="date-picker form-control hasDatepicker" id="statusDateFrom" type="text" placeholder="From" value="" data-db-name="FromDateReqSearch" style="max-width:425px;"> <button class="ui-datepicker-trigger btn btn-default" type="button"><span class="fa fa-calendar"></span></button> </span> </div> </div> <div class="form-group form-group-sm"> <label for="ToDate">To</label> <div class="input-group input-group-sm input-group-xs"> <span class="input-group-btn"> <input name="DWPStatusDateTo" class="date-picker form-control hasDatepicker" id="statusDateTo" type="text" placeholder="To" value="" data-db-name="ToDateReqSearch" style="max-width:425px;"> <button class="ui-datepicker-trigger btn btn-default" type="button"><span class="fa fa-calendar"></span></button> </span> </div> </div> </div> </div> <div class="form-group form-group-sm"> <label for="packReq">Packaging Requirement</label> <div class="input-group"> <span class="input-group-addon fa-fw">AA</span> <input name="PackagingRequirementNumber" class="form-control" id="packagingRequirementNumber" style="width: 100%;" type="text" placeholder="PR No" value=""> <span class="input-group-addon fa-fw">-</span> <input name="PackagingRequirementVersion" class="form-control" id="packagingRequirementVersion" style="width: 50%;" type="text" placeholder="PR Ed" value=""> </div> </div> <button type="submit" class="btn btn-primary">Search <span class="fa fa-search" aria-hidden="true"></span></button> </form> </div> </div> <button type="button" class="btn btn-primary" title="Search"><span class="fa fa-search" aria-hidden="true"></span></button> </div> </div> </div> </div> </div> </div> </div>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"); body { padding-top: 50px; } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } } input, select, textarea { max-width: 280px; } #requiredSearchForm input, #requiredSearchForm select, #requiredSearchForm textarea { max-width: none; } #requiredSearchForm label { margin-top: 5px; } .btn-default.btn-on.active { background-color: #5BB75B; color: white; } .btn-default.btn-off.active { background-color: #DA4F49; color: white; } body { padding-top: 50px; } .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } } input, select, textarea { max-width: 280px; } #requiredSearchForm input, #requiredSearchForm select, #requiredSearchForm textarea { max-width: none; } #requiredSearchForm label { margin-top: 5px; } .btn-default.btn-on.active { background-color: #5BB75B; color: white; } .btn-default.btn-off.active { background-color: #DA4F49; color: white; } select::-ms-expand { border:none; background:#fff; }

Questions / Comments: