Tempus-dominus: The datetime-picker creates a scroll bar for a model dialog.

[malhayek2014]

When the datetime-picker opens up in a small dialog, it is half way hidden and it created a scroll bar in the model making it hard to select a date unless your using a mouse with a scroll capability.

Here is my html code

<div class="form-group">
            <label class="control-label col-sm-3" for="ManageEmployeeAddTimeStartedAt">Start At</label>
            <div class="col-sm-9">
                <input class="form-control datetime-picker" name="StartedAt" id="StartedAt" value="" required="" aria-required="true" aria-invalid="false"  type="datetime">
            </div>
</div>

I tried to add a very large z-index value but it did not fix the problems.

.datepicker 
.bootstrap-datetimepicker-widget
{
    z-index: 15000 !important;
}

Is there a workaround for this issue?

[astax-t]

There were several other issues all with probably the same reason - the calendar element is created next to the input element in DOM and therefore has to obey the constraints of parent container whether it's making it scrollable scrollbar or clipping the content.

1353

1762

1863

[renandegrandi]

+1 If there was the possibility of linking the component with the body this problem would not exist

[fmluizao]

This datepicker is attached to the body, and works very well inside modals, but don't support time... how difficult would be attaching the calendar directly to the body?

[eonasdan-bot]

Hello. Thanks for using my project. We’re closing all tickets/prs for v4 as it is no longer supported. We’re making way for a new version. Please read this blog post