Increase filter search width on FooTable Plugin

Question

I searched everything and cannot find / figure out how to make the “data filter” search box bigger. I would like to make it wider, while maintaining its responsiveness to window resizing, is this possible? I tried to miss

filtering: [{ container: "#footableFilterBox", options: { style: { width: "75%" } } }]

but does it either not apply here, or is my syntax incorrect?

I also tried adding css widthdirectly to input-groupwhich FooTable generates using

$(document).load(function() {
  $('div#footableFilterBox').find('.input-group').css('width','75%');
});     

But that does not work. I also tried .addClass();customizing my own CSS, but that didn't work either.

Does anyone have any ideas? This would be very useful for the layout of my page. Thanks in advance!

Update

Here is the code used to initialize the FooTable plugin. It is at the bottom of my HTML page. I use it in a rails application, but that should not matter much, imo.

<script type="text/javascript">

jQuery(function($) {

  $('#propertiesTable').footable({
      filtering: [{
          container: "#footableFilterBox"
      }]
  });

});

</script>

Code that worked

Based on @gaetanoM's answer, I was able to use jQuery Tree Traversal to go on finding the item I needed. Code below:

$('#propertiesTable').on('postinit.ft.table', function(e, ft) {
    $(this).closest('.clients-list').siblings('#footableFilterBox').find('.footable-filtering-search, .input-group').css('width','100%');
  }).footable();

Thanks for the answers!

Answer 1

You can use:

postinit.ft.table : the postinit.ft.table event occurs after any components are initialized, but before the table is drawn for the first time. Calling preventDefault for this event will disable the original table drawing.

$('.table').on('postinit.ft.table', function(e, ft) {
  $(this).find('.footable-filtering-search .input-group').css('width','75%')
}).footable();

fiddle .