javascript - How to display datetimepicker outside of scrollbar

Question

I have a long table that needs to be displayed inside a small area so I'm using overflow-x: scroll; to make a horizontal scrollbar under the table.

Inside the table, I have a few input fields with datetimepicker.

My problem is when I click on the input field to show the datatimepicker, it makes a vertical scrollbar and displays inside these 2 scrollbars.

jQuery('#birthday1').datetimepicker({
  format: "DD/MM/YYYY"
});
jQuery('#birthday2').datetimepicker({
  format: "DD/MM/YYYY"
});
jQuery('#birthday3').datetimepicker({
  format: "DD/MM/YYYY"
});

.overflow-x-scroll {
  overflow-x: auto !important;
}
.overflow-x-visible {
  overflow-x: visible !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-form-label" for="comp">Table
  </label>
  <div style="width: 600px; height:600px;
    background-color: #cccccc;">
    <div class="overflow-x-scroll">
      <table width="1000px" border="0" cellspacing="0" cellpadding="0">
        <tr class="head">
          <td>Field Text</td>
          <td>Field Text</td>
          <td>Field Text</td>
          <td>Field Date</td>
        </tr>
        <tr>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td>
            <div style="position:relative">
              <input type="text" placeholder="Birthday" name="birthday" id="birthday1" class="form-control ">
            </div>
          </td>
        </tr>
        <tr class="head">
          <td>Field Text</td>
          <td>Field Text</td>
          <td>Field Text</td>
          <td>Field Date</td>
        </tr>
        <tr>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td>
            <div style="position:relative">
              <input type="text" placeholder="Birthday" name="birthday" id="birthday2" class="form-control ">
            </div>
          </td>
        </tr>
      </table>
    </div>
    <br/>
    <br/>
    <br/>
    <div class="overflow-x-visible">
      <table width="1000px" border="0" cellspacing="0" cellpadding="0">
        <tr class="head">
          <td>Field Text</td>
          <td>Field Text</td>
          <td>Field Text</td>
          <td>Field Date</td>
        </tr>
        <tr>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td class="text-center">
            <input type="text" name="hi_name" class="form-control text-center" />
          </td>
          <td>
            <div style="position:relative">
              <input type="text" placeholder="Birthday" name="birthday" id="birthday3" class="form-control ">
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>

question from:https://stackoverflow.com/questions/65856945/how-to-display-datetimepicker-outside-of-scrollbar

Answer 1

Waitting for answers