How do you set the search filter input to be full width using Bootstrap 3's form-control class?
How do you set the search filter input to be full width using Bootstrap 3's form-control class?
waggy_d
Posts: 1Questions: 1Answers: 0
Hello. I'm trying to make the search filter input be 100% width. I've tried a bunch of things without success. I've placed the best idea thus far below but its not working.
Any insight would be much appreciated.
This is my current js:
// DATATABLES
$('.datatable').each(function(){
var $this = $(this),
page = ($this.data('page')) ? $this.data('page') : 'bs_full',
source = ($this.data('source')) ? $this.data('source') : false,
isAjax = (source) ? true : false ;
$this.dataTable({
"sPaginationType": page,
"bProcessing": isAjax,
"sAjaxSource": source
});
});
$('.datatable-tools').each(function(){
var $this = $(this),
page = ($this.data('page')) ? $this.data('page') : 'bs_full',
source = ($this.data('source')) ? $this.data('source') : false,
isAjax = (source) ? true : false ;
$this.dataTable({
"sPaginationType": page,
"bProcessing": isAjax,
"sAjaxSource": source,
"sDom": "<'row'<'col-sm-12'<'form-group'<f>>>>tr<'row'<'col-sm-12'<'pull-left'i><'pull-right'p><'clearfix'>>>",
"oTableTools": {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": 'Save <i class="fa fa-angle-down"></i>',
"aButtons": [
"xls",
"csv",
{
"sExtends": "pdf",
// "sPdfMessage": "Your custom message would go here.",
"sPdfOrientation": "landscape"
}
]
}
],
"sSwfPath": "scripts/swf/copy_csv_xls_pdf.swf"
}
});
});
$('.datatable, .datatable-tools').each(function(){
var datatable = $(this);
// SEARCH - Add the placeholder for Search and Turn this into in-line form control
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', 'Search');
search_input.addClass('form-control input-lg');
// LENGTH - Inline-Form control
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
length_sel.addClass('form-control input-sm');
});
// END DATATABLES
This discussion has been closed.
Answers
For Bootstrap 3, you would add the grid class to the input element. Try this in your code.
Assuming that you are using the default grid from Bootstrap.
Also, look for a css style for .dataTables_filter; I had to remove the input width setting to get the sizing to work.
Then remove the class form-inline from the same div that has the dataTables_wrapper class.
You might have to add the class col-xs-12 to the parent element of the input.
That should work.