Datetimepicker 下拉菜单未显示全尺寸

Question

我在使用日期时间选择器小部件时遇到以下问题。

我正在使用以下 Bootstrap 4 模板：

<div class="container-fluid">
  <div class="row">
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
      <div class="sidebar-sticky pt-3" style="height:100%">
        <div class="container-fluid pt-4 pb-2 mb-2 border-bottom px-md-4">
          <h4>Filtri</h4>
        </div>
        <div class="container">
          <div>
            <input type='text' class="form-control" id='dateTimePickerFrom' />
          </div>
          <div>
            <input type='text' class="form-control" id='dateTimePickerTo' />
          </div>
        </div>
      </div>
    </nav>
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
      <div class="container-fluid pt-0 px-md-0 bg-white">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h2 class="h2">Trend</h2>
        </div>
        <div class="p-1">
          <canvas id="trendChart" style="width:100%; height:400px;"></canvas>
        </div>
      </div>
    </main>
  </div>
</div>

<script>
// set up the datetime pickers
$(function () {
  // from picker
  $('#dateTimePickerFrom').datetimepicker({
    format: "DD/MM/YYYY HH:mm",
    showTodayButton: false,
    defaultDate: fromDate
  }).on("dp.change", function() {
    // code executed on date change
    fromDate = getData($('#dateTimePickerFrom').val());
    $('#dateTimePickerTo').data("DateTimePicker").minDate(fromDate);
  });
  // to picker
  $('#dateTimePickerTo').datetimepicker({
    format: "DD/MM/YYYY HH:mm",
    showTodayButton: true,
    defaultDate: toDate,
  }).on("dp.change", function() {
    // code executed on date change
    toDate = getData($('#dateTimePickerTo').val()); //new Date(yyyy, mm, dd, hh, min)
    $('#dateTimePickerFrom').data("DateTimePicker").maxDate(toDate);
  });
});
</script>

我导入了以下内容：

<!-- Bootstrap core CSS -->
<link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- datetimepicker section -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/bootstrap-datetimepicker.min.css">
<script src="build/js/bootstrap-datetimepicker.min.js"></script>

我想让日期时间选择器小部件适合页面的左侧部分。我尝试更改小部件的 z-index 但没有成功，我还尝试调整它的大小（我如何尝试访问小部件属性的示例）：

.bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 99;
  width: auto;
  font-size: 10px;
}

我更愿意让小部件出现在前台，但调整它的大小也很有用。非常感谢任何帮助！

Answer 1

我自己找到了解决方案。我将 CSS 属性“溢出：可见”添加到：

<div class="sidebar-sticky pt-3" style="height:100%; overflow: visible;">

Datetimepicker 下拉菜单未显示全尺寸

Datetimepicker dropdown menu is not shown full size

html

javascript

jquery

datetimepicker

bootstrap-4