ciprigothic ciprigothic - 1 year ago 74
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 () {
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.