Tablefilter.js, set filter row height

Question

I use the jquery plugin tablefilter.js to filter html tables. In a specific case (in image below column 9), I use a checkbox filter and i try to reduce it height to match the one of the other controls of the filter row.

When inspecting the specific div containing the filter row I get :

<tr class="fltrow">
  <td>
    <input id="flt0_demo" type="text" ct="0" class="flt">
  </td>
  <td>
    <input id="flt1_demo" type="text" ct="1" class="flt">
  </td>
  <td>
    <select id="flt2_demo" ct="2" filled="1" class="flt">
      <option value="">Clear</option>
      <option value="Aff">Aff</option>
      <option value="john">john</option>
      <option value="DB">DB</option>
      <option value="CT">CT</option>
      <option value="AG_VIP">AG_VIP</option>
      <option value="el">el</option>
      <option value="Josef">Josef</option>
      <option value="Laura">Laura</option>
      <option value="null">null</option>
      <option value="REF">REF</option>
      <option value="SEO">SEO</option>
    </select>
  </td>
  <td>
    <select id="flt3_demo" ct="3" filled="1" class="flt">
      <option value="">Clear</option>
      <option value="N/A">N/A</option>
      <option value="OPEN">OPEN</option>
      <option value="PASS">PASS</option>
      <option value="REQ">REQ</option>
    </select>
  </td>
  <td>
    <input id="flt4_demo" type="text" ct="4" class="flt">
  </td>
  <td>
    <input id="flt5_demo" type="text" ct="5" class="flt">
  </td>
  <td>
    <input id="flt6_demo" type="text" ct="6" class="flt">
  </td>
  <td>
    <select id="flt7_demo" ct="7" filled="1" class="flt">
      <option value="">Clear</option>
      <option value="BRONZE">BRONZE</option>
      <option value="SILVER">SILVER</option>
    </select>
  </td>
  <td>
    <select id="flt8_demo" ct="8" filled="1" class="flt">
      <option value="">Clear</option>
      <option value="BRONZE">BRONZE</option>
      <option value="SILVER">SILVER</option>
    </select>
  </td>
  <td>
    <div id="chkdiv_9_demo" ct="9" filled="1" class="div_checklist">
      <ul id="flt9_demo" colindex="9" class="flt_checklist">
        <li class="flt_checklist_item">
          <label for="flt9_demo_0">
            <input id="flt9_demo_0" name="flt9_demo_0" type="checkbox" value="" data-idx="0">Clear </label>
        </li>
        <li class="flt_checklist_item">
          <label for="flt9_demo_1">
            <input id="flt9_demo_1" name="flt9_demo_1" type="checkbox" value="Downgraded" data-idx="1">Downgraded </label>
        </li>
        <li class="flt_checklist_item">
          <label for="flt9_demo_2">
            <input id="flt9_demo_2" name="flt9_demo_2" type="checkbox" value="Promoted" data-idx="2">Promoted </label>
        </li>
        <li class="flt_checklist_item">
          <label for="flt9_demo_3">
            <input id="flt9_demo_3" name="flt9_demo_3" type="checkbox" value="Stable" data-idx="3">Stable </label>
        </li>
      </ul>
    </div>
  </td>
  <td>
    <input id="flt10_demo" type="text" ct="10" class="flt">
  </td>
</tr>

i tried to change the css of the div to set it max row with:

 .fltrow {
    max-height: 200px; !important;
    overflow: auto; !important;
 }

but I have no luck. I also checked the plugin methods to see if there was any way to adjust the filterow height, have not found anything.

Answer 1

You can add CSS to checkbox <div id="chkdiv_9_demo"> element as below:

#chkdiv_9_demo {
  overflow-y: scroll;
  height: 20px;
}

(you can always adjust height as per your need)

Below is the output: