ciprigothic ciprigothic - 5 months ago 28
Javascript Question

Individual column filtering in header. How to change the width of search filter textbox for each column's individually?

On my JavaScript code one style width value is set for all search-textboxes, and I can't resize them one by one.

$(function () {
$('.ttip').tooltip({
animated: 'fade',
placement: 'top',
container: 'body'
});

$('#detailed thead th').each( function () {
var title = $('#detailed thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" class="popoverData" data-content="Please enter a '+title+'" rel="popover"' +
' data-placement="bottom" data-trigger="hover" style="width:80;" placeholder="'+title+'" />' );

} );

Answer

You can style the individual <input>'s by simple CSS :

#detailed thead th:nth-child(1) input {
  width: 30px !important;
  max-width: 30px !important;
}

#detailed thead th:nth-child(3) input {
  width: 80px !important;
  max-width: 80px !important;
}

and so on. If you discover problems (which I do not expect) set autoWidth: false.