How do you set the search filter input to be full width using Bootstrap 3's form-control class?

waggy_d

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

quickstep25

For Bootstrap 3, you would add the grid class to the input element. Try this in your code.

search_input.addClass('form-control input-lg col-xs-12');

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.