Bootstrap datetimepicker issue instide a table-responsive class

Question

I am using this (https://github.com/Eonasdan/bootstrap-datetimepicker) Date and time picker for my website, and when you open the datetime picker in a table-responsive class it does not show the date picker on top the table unless in the css you add .table-responsive { overflow:visible !important } in the css. Its all well and good doing this, but then when you shrink the screen or use it on a mobile / tablet, the table is no longer responsive and hangs off the side of the screen.

Please see this (https://jsfiddle.net/daza110/6abxn644/3/) fiddle which shows it opening correctly until you shrink the screen.

And please see this (https://jsfiddle.net/daza110/6abxn644/4/) fiddle which shrinks the table correctly, but does not show the calendar properly.

<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>

Jquery

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

UPDATE

I hacked this but it isnt nice, I added a PHP function that attaches a DatePicker and then did the following jquery code, this removes the table-responsive and adds a temp class on show then on hide removes temp class and adds the table-responsive again:

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>
    <?
}

Were you able to find a solution to this? I am encountering this as well when the parent div has overflow:hidden but I can't figure out how to avoid it without breaking my layout. — Romulo, Jun 02 '16 at 18:10

score 3 · Answer 1 · answered Jan 15 '16 at 12:51

3

I don't understand too much what you need but is maybe this?

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

See in this fiddle

answered Jan 15 '16 at 12:51

Sergi Mulà

104
3

When you click on the date field, the datepicker popup shows behind the table, not on top – Daryl Goode Jan 15 '16 at 12:55

score 0 · Answer 2 · answered Jul 04 '19 at 11:39

easy way is setting position: static for datepicker wrapper. For instance

<td>
            <div class="col-sm-12">
              <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
            </div>
          </td>

you can set .col-sm-12 {position: static}

score 0 · Answer 3 · answered Mar 02 '22 at 19:59

I haven't found any answer about this question that really pleases.

So I adapted a another code for bootstrap dropdown with same problem inside .table-responsive

below is the main code, that I put on window:

window.setDatapickerEvents = ($parentElement) => {
    $($parentElement).on('dp.show', function (e) {
        const $e = $(e.target);
        const $input = $e.find('input').first();
        const $btn = $e.find('span.input-group-addon').first();
        const $dropdownMenu = $e.find('.dropdown-menu');

        const eOffset = $e.offset();
        const btnWidth = $btn.outerWidth();
        const inputWidth = $input.outerWidth();
        const dropdownWidth = $dropdownMenu.outerWidth();
        const dropdownHeight = $dropdownMenu.outerHeight();

        $('body').append($dropdownMenu.detach());

        $dropdownMenu.css({
            'top': eOffset.top - dropdownHeight,
            'left': eOffset.left + inputWidth + (btnWidth / 2) - dropdownWidth + 20,
            'width': dropdownWidth,
            'height': dropdownHeight,
        });
    });

    $($parentElement).on('dp.hide', function (e) {
        const $e = $(e.target);
        const $dropdownMenu = $e.find('.dropdown-menu');

        $e.append($dropdownMenu.detach());
        $dropdownMenu.hide();
    });
}

And to enable it inside scripts tag in your page

setDatapickerEvents('.table-responsive');

Before - Problem After - Resolved

I hope it helps anyone

Bootstrap datetimepicker issue instide a table-responsive class

3 Answers3