4

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!

cdouble.bhuck
  • 507
  • 1
  • 5
  • 19
  • Do not depend on the `.load()` event to check if the plugin has been initialised. Instead, you can simply set the style/add the class in a function that is called when the plugin has initialised: i.e. when the `init.ft.table` event is fired: http://fooplugins.github.io/FooTable/docs/getting-started.html#on. Can you share with us the code you used to initialize FooTable? – Terry Aug 06 '17 at 22:10
  • Updated, also if you form your comment into a clear answer post showing how I should use `init.ft.table` properly then I will accept it. Thanks! – cdouble.bhuck Aug 06 '17 at 22:17
  • Consider that done ;) – Terry Aug 06 '17 at 22:36

1 Answers1

1

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.

gaetanoM
  • 41,594
  • 6
  • 42
  • 61
  • Thanks for the answer! This code definitely works with the stock position of the `data-filter` which is right above the table like in your example. However, I'm trying to reposition the filter search, which does work on its own, AND resize it. But I was unable to get both to work. Any ideas? – cdouble.bhuck Aug 07 '17 at 00:15
  • I was able to get it working based off your answer and I have updated my post with the working code. Thanks very much! – cdouble.bhuck Aug 07 '17 at 01:00