I have a filter box that appears when the filter icon is clicked, but it currently lacks Bootstrap styling. I am in the process of upgrading the website to Bootstrap3 HTML5.
The current appearance of the filter icon is as follows:
However, we want it to be styled like this:
Below is my code with the old styling, but I am not very skilled at styling using jQuery/Java
document.getElementById('<%:cell.ColumnIdentifier%>_link').addEvent('click', function()
{
if(filterPopUp == null){}
else
{
filterPopUp.hide();
}
filterPopUp = new StickyWin.PointyTip("Add filter for <%:cell.Value %>", "<%= String.Format("Values from <input id='{0}_from' name='{0}_from' value='{1}'/> to <input id='{0}_to' name='{0}_to' value='{2}'/><br/><div style='text-align:right !important;margin-right:0px;margin-top:5px;'><input type='button' onclick='SubmitForm(this, \\\"filter\\\");' id='{0}' name='{0}' value='Apply' style='margin-right:10px;background-color:#CCCCCC;text-align:center !important;' class='greyButton89'/><input type='button' onclick='SubmitForm(this, \\\"clear\\\");' id='{0}' name='{0}' value='Clear' class='greyButton89' style='background-color:#CCCCCC;text-align:center !important;'/></div>", cell.ColumnIdentifier, defaultMin, defaultMax)%>", {
point: 'up',
pointyOptions: { theme: 'light' },
relativeTo: '<%:cell.ColumnIdentifier%>_img'
});
return false;
});
This is the code I used for the mockup:
<div class='col-sm-4 hidden-xs'>
<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>Add filter for Test</h3>
</div>
<div class='panel-body'>
<div class='form-group'>
<label class='col-sm-5 control-label'>Amount from</label>
<div class='col-sm-7'>
<div class="input-group">
<span class="input-group-addon">£</span>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class='form-group'>
<label class='col-sm-5 control-label'>Amount to</label>
<div class="col-sm-7">
<div class="input-group">
<span class="input-group-addon">£</span>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class='form-group pull-right'>
<div class='col-sm-12'>
<button type='button' class='btn btn-default'>
<span class='glyphicon glyphicon-ok'></span> Apply
</button>
<button type='button' class='btn btn-default'>
<span class='glyphicon glyphicon-remove'></span> Clear
</button>
</div>
</div>
</div>
</div>
</div>
Firstly, can this be achieved?
If so, how?
Thank you,
Antony