Datetimepicker dropdown menu is not shown full size

I’m having the following problem with a datetimepicker widget.

I’m using the following Bootstrap 4 template:

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

And I imported the following:

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

I would like to make the datetimepicker widget fit the left section of the page. I tried to change the z-index of the widget with no success and I also tried to resize it (example of how I tried to access the widget properties):

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

I would prefer to make the widget appear on the foreground, but also resizing it could be useful. Any help will be really appreciated!

Answer

I found the solution by my self. I added the CSS property “overflow: visible” to:

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

Advertisement

Answer