Search code examples
javascriptjqueryhtmlcssfootable

Increase width of filter search on FooTable Plugin


I've been looking all over and can't seem to find/figure out how to make the 'data-filter' search box any bigger. I would like to make it wider while still remaining its responsiveness to window resizing, is this possible? I've tried passing

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

but that either doesn't apply here or my syntax is incorrect?

I've also tried to add css width directly to the input-group that FooTable generates using

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

But it doesn't seem to work. I've also tried to .addClass(); and customize my own css but that didn't work either.

Anyone have any ideas? This would be greatly helpful for the layout of my page. Thanks in advance!

Update

Here is the code used to initialize the FooTable plugin. It resides at the bottom of my HTML page. I'm using it in a rails application but that shouldn't make much of a difference, imo.

<script type="text/javascript">

jQuery(function($) {

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

});

</script>

Code that worked

Based off of @gaetanoM's answer I was able to use jQuery Tree Traversal to navigate my way to finding the element that 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 all answers provided!


Solution

  • You may use:

    postinit.ft.table: The postinit.ft.table event is raised after any components are initialized but before the table is drawn for the first time. Calling preventDefault on this event will disable the initial drawing of the table.

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

    The fiddle.