Bootstrap 3 Styling Does Not Provide Search Filter Clear Icon [SOLUTION PROVIDED]

Joyrex

I noticed that the Bootstrap 3 styling does not provide a "X" clear icon for clearing the field after searching, unlike the default styling does. I've got a solution (perhaps not as elegant or straightforward as it could be), and wanted to share with the community:

language: {search: ""}, //sets the label filter text to nothing since we won't be using it
$('#YourTableID_filter label').contents().unwrap(); //strip off that label tag Bootstrap doesn't like
    $('#YourTableID_filter input').attr('placeholder','Type to filter results').wrap('<div class="input-group input-group-sm"></div>').after('<span class="input-group-btn"><button type="button" class="btn btn-danger" data-toggle="tooltip" title="Click to clear filter" data-placement="auto left"><i class="glyphicon glyphicon-remove"></i></button></span>');
    $('button.btn.btn-danger').click(function() {
        $('input[type=search]').val('');
        table.search('').column().search('').draw();
    } );

This can go anywhere after the DataTables initialization block, and will create a filter box without a label and create a Bootstrap input/button group. I was going to put together a JSFiddle demo, but I couldn't get the CDNs for DataTables Bootstrap to work properly. If you are familiar with Bootstrap's styles, you can remove the input-group-sm from the DIV created so it is a normal-size input - I just prefered the slightly smaller one.

I welcome anyone wanting to refine the above, and feel free to use it (and incorporate it into DataTables' Bootstrap 3 styling).

allan

Thanks for letting me know about that. Bootstrap removes the clear icon that browser's show for the type="search" input. My understanding is they have to do that due to how limited the styling available on the search input is (which to my mind is bonkers - it should just be a text input with a clear icon!).

Thanks for sharing your workaround with us.

Allan

Joyrex

Oh, so it is Bootstrap that is doing that, I'm guessing in their CSS reset code? That's another way of fixing it then (undo what the Bootstrap CSS does) if you don't want an input with a button like in my example.

allan

Bootstrap includes:

input[type=search] {
    -webkit-appearance: none;
}

I believe that comes from forms.less. It looks like there are a few other things in Bootstrap that cause it.

Allan

allan

From @nikko320:

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

Can be used to resolve this.

Joyrex

@allan & @nikko320 : That's fine for Webkit-based browsers, but that leaves out IE, Edge, and Firefox. AFAIK, those browsers do not have a dedicated cancel UI element that can be invoked like it can on Webkit browsers.

allan

This is really something that you would need to take up with the Bootstrap folks as it isn't something special that DataTables is doing (at least not intentionally). Bootstrap will hide the little clear icon in a type="search" input.

Allan