ciprigothic ciprigothic - 1 year ago 81
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download