Being able to configure filter controls to popup in a popover, would be useful for very narrow columns

[MrCsabaToth]

Bells and whistles enhancement: I have several narrow columns which are about 30 pixel wide only. I don't even have space for a filter clear button in their case. I saw the possibility to dedicate controls placed elsewhere on the UI for filtering. But it would be great if there could be a flag in to yadcf configuration, which would just place a button in the header (/footer wherever the filters are) and when you press that button a popover appears where you have the text input (or selection, etc) and the clear buttons.

[MrCsabaToth]

This could be implemented in case of bootstrap support with a bootstrap style popover. There a very slight chance I might be able work on that.

[vedmack]

Yeah, I thought about adding this feature, but unfortunately since the lack of time I couldn't add it yet, b.t.w IMO a better / alternative solution would be to have a small filter button (size of the sort arrow) on the left side of the header title, and when pressing on that filter icon, the header title would be replaced with the filter (input/select/etc') and pressing that filter icon again will return the header title back again.

[dovydasvenckus]

That would be nice feature to have in long term :+1:

[MrCsabaToth]

I don't think I'll have time for this unfortunately

[bdunsmuir]

This would be very nice. The select2 multi-selection box is very large, with lots of columns on a page it becomes a problem.

[programmer24601]

Bump. Please implement this feature. It would make this plugin perfect! :+1:

You could use <span class="halflings halflings-filter"></span> as the icon to access the popup box.

[awesomeruss]

5 min of experimentation shows you can get close to this with css:

.yadcf-filter-wrapper {display:none !important}
div.yadcf-filter-wrapper.shown, th:hover  div.yadcf-filter-wrapper {
  display: block !important;
}

It just needs a bit of js adding to add/remove the shown class to the filter wrapper when the related popup menu is shown/hidden. The JS below does it, but in a super-ugly way.

$('body').on('mouseleave', '.select2-results__options', function(e){
  var x= this.id.replace('select2-','#').replace('-results','').replace('-filter-','-filter-wrapper-');
  console.log('unshowing '+x);
  $(x).removeClass('shown');
});
$('body').on('mouseenter', '.select2-results__options', function(e){
  var x= this.id.replace('select2-','#').replace('-results','').replace('-filter-','-filter-wrapper-');
  console.log('showing '+x);
  $(x).addClass('shown');
});

[vedmack]

@awesomeruss feel free to post a jsfiddle with your code sample

[awesomeruss]

I just used this page: https://yadcf-showcase.appspot.com/DOM_source_select2.html F12 for developer tools, add the CSS to the inspector stylesheet, and run the 2 JS commands in the console.

[vedmack]

@awesomeruss its nice but need more development, a PR is welcome...