Bootstrap datetimepicker not working inside table-responsive Fix Dynamic Table height

/// HTML

<div class="panel-body">

  <div class="table-responsive">

    <table class="table table-condensed table-hover table-striped text-center bgwhite" id="accountTable">

      <thead>

        <tr>

          <th class="col-sm-2">Debt Ref</th>

          <th class="col-sm-2">Due Date</th>

          <th class="col-sm-2">Amount Paid</th>

          <th class="col-sm-2">Account</th>

          <th class="col-sm-2">Reconcile Date</th>

        </tr>

      </thead>

      <tbody>

        <tr class="armitage">

          <td>

            <div>NOR087-DAN052</div>

          </td>

          <td>

            <div>05/01/2016</div>

          </td>

          <td>

            <div>180.00</div>

          </td>

          <td>

            <div class="col-sm-12">Paralegal (951)</div>

          </td>

          <td>

            <div class="col-sm-12">

              <input type="text" placeholder="Reconcile Date" name="dates" id="dates" class="form-control ">

            </div>

          </td>

        </tr>

      </tbody>

    </table>

  </div>

</div>

/// CSS

        .fixed-table-body {

  overflow-x: visible;

  overflow-y: visible;

  height: 100%;

}

//// JS

  $(document).ready(function () {

                    $('.table-responsive').on('dp.show', function () {

                        $('.table-responsive').css("min-height", "425px");

                    });

                    $('.table-responsive').on('dp.hide', function () {

                        $('.table-responsive').css("min-height", "none");

                    });

// or

// $('.table-responsive').on('dp.hide', function () {

 //                       $('.table-responsive').css("min-height", "100px");

 //                   });

});