3

私はこれ ( https://github.com/Eonasdan/bootstrap-datetimepicker ) の日付と時刻のピッカーを自分のウェブサイトに使用しています。テーブル応答クラスで日時ピッカーを開くと、日付ピッカーがcssに.table-responsive {overflow:visible !important}を追加しない限り、テーブル。これを行うことはすべてうまくいきますが、画面を縮小したり、モバイル/タブレットで使用したりすると、テーブルが応答しなくなり、画面の側面からぶら下がります。

画面を縮小するまで正しく開くことを示すこの ( https://jsfiddle.net/daza110/6abxn644/3/ ) フィドルを参照してください。

そして、テーブルを正しく縮小しますが、カレンダーを正しく表示しないこの ( https://jsfiddle.net/daza110/6abxn644/4/ ) フィドルを参照してください。

<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[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Jクエリ

jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
  format: "DD/MM/YYYY"
});

アップデート

私はこれをハックしましたが、それはいいことではありません.DatePickerを添付するPHP関数を追加し、次のjqueryコードを実行しました.これにより、テーブルレスポンシブが削除され、表示時に一時クラスが追加されます.また：

function attachDatePick($fieldId)
{
    ?>
    <script type="text/javascript">
        jQuery(function()
        {
            jQuery('#<?echo $fieldId;?>').datetimepicker().on('dp.show',function()
            {
                jQuery(this).closest('.table-responsive').removeClass('table-responsive').addClass('temp');
            }).on('dp.hide',function()
            {
                jQuery(this).closest('.temp').addClass('table-responsive').removeClass('temp')
            });
        });
    </script>
    <?
}
4

3 に答える 3

3

私はあなたが何を必要としているのかあまり理解していませんが、多分これですか？

.table-responsive {
 overflow-x: inherit;
}

このフィドルを参照してください

于 2016-01-15T12:51:44.093 に答える