data-height and data-filter-control not working together

[yogendramaarisetty]

<table
  id="table"
  data-filter-control="true"
  data-show-search-clear-button="false"
  data-search="true"
  data-height="460"
  data-toolbar="#toolbar"
  >
  <thead>
    <tr>
    <th data-field="state" data-checkbox="false"></th>
     <th scope="col">Sno.</th>
      <th data-filter-control="input"  id="th1" data-field="id"  scope="col">Employee ID</th>
      <th data-filter-control="input"  data-field="first_name"  scope="col">First Name</th>
      <th data-filter-control="input"  data-field="last_name" scope="col">Last Name</th>
      <th data-filter-control="input"  data-field="DOB" scope="col">Date of birth</th>
      <th data-filter-control="input"  data-field="joining_date" scope="col">Joining date</th>
      <th data-filter-control="input"  data-field="experience" scope="col">Experience</th>
    </tr>
  </thead>
</table>

The generated table does not show filter input boxes when we add data-height attribute
filters are working fine without data height

[vossivossi]

I have exactly the same problem, the issue is reproducable.
Here an example with data-height where the filter is not shown:
https://live.bootstrap-table.com/code/vossivossi/2888

If you just remove the statement ' data-height="625" ' in line 1 the filter-control works, here the same example without data-height and working filter-control:
https://live.bootstrap-table.com/code/vossivossi/2889

[3cdota]

我也遇到了相同的问题

[yogendramaarisetty]

But that is not the solution I was expecting.
I wanted both filter-control and height together

[UtechtDustin]

@yogendramaarisetty we are working on that issue.
@wenzhixin @djhvscf currently i cant figure out that issue...
But i found out that the createControls function (

bootstrap-table/src/extensions/filter-control/bootstrap-table-filter-control.js

Line 295 in b3b2967

createControls (that, header) {

) will be executed to late (so no controls can be created).
After that the header will be copied (https://github.com/wenzhixin/bootstrap-table/blob/develop/src/bootstrap-table.js#L1814).
Im not sure what happens there ;o

[vossivossi]

One more comment (I don't know if it helps): The problem exists only since version 1.16.0 , there is no problem with 1.15.5

[Crowesesse]

Issue appears to be here

bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.js

Lines 2551 to 2560 in e5014a4

	key: "initHeader",
	value: function initHeader() {
	_get(_getPrototypeOf(_class.prototype), "initHeader", this).call(this);
	if (!this.options.filterControl) {
	return;
	}
	UtilsFilterControl.createControls(this, UtilsFilterControl.getControlContainer());
	}

UtilsFilterControl.getControlContainer() always returns the $tableHeader when the height is set rather then the $header which is needed here. Working for me once I changed that back to UtilsFilterControl.createControls(this, this.$header);

[djhvscf]

I reviewed this. It looks like the order in which the table is rendered. I think we need to listen to new events (in filter-control) or use a trick like setTimeOut

[wenzhixin]

Duplicate of #4869