Timepicker displays below bootstrap 3 modals

[nickvellios]

Using Bootstrap 3 with a timepicker inside of a modal, the timepicker is hidden behind the modal. Interestingly, changing the z-index didn't seem to fix it.

[oliversteiner]

Same Problem

[oliversteiner]

This workaround works for me

jQuery("input[type=time]").focus(function () {

  const $element = jQuery(this);

  // move timepicker-container from body to drupal modal
  const $bootstrap_modal_content = jQuery('.modal-content');
  const $timepicker_container = jQuery('.ui-timepicker-container');
  $timepicker_container.appendTo($bootstrap_modal_content);

  // get position top and left from active element
  var element_position = $element.position()

  // Get Height of  active Element
  var element_height = $element.outerHeight();

  // additional corrections
  var extra_height = 50;

  var new_top = element_position.top + element_height + extra_height;
  var new_left = element_position.left;

  $timepicker_container.css({
    'top'    : new_top,
    'left'   : new_left,
    'z-index': '10' // overlap other input elements
  });
});

[gfdac]

thanks oliversteiner... i used with $('#input-time)... and dont use the top and left.. worked flawless... thanks