Bootstrap datetimepicker cut off inside of tab-content box

Question

I'm using eonasdan-bootstrap-datetimepicker. Please see the pics here first:

1. The datetimepicker is within the Bootstrap tab-content control and is cut off by the upper margin.
   
   screenshot of without br tags
   
   

2. A layer of br tags add padding, thus allowing the full datetimepicker to reveal itself.
   
   screenshot of br tags included
   
   

Here is the markup of the form without the br tags below form-group:

<form class="form-horizontal mt-sm" action='' method="POST">
    <fieldset>    
        <div class="form-group">
            <label for="expiration-date" class="control-label col-md-3">Expiration Date</label>
            <div class="col-md-8">
                <div class="col-md-10"><input type="text" id="expiration-date" class="form-control"></div>
            </div>
        </div>
    </fieldset>
</form>

Here are the scripts:

<script src="/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="/lib/select2/select2.min.js"></script>
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

Answer 1

The issue is that the z-index of your tabs are higher than the date-picker UI. So to resolve this you must increase the z-index of the date picker UI.

.datepicker {
    z-index: 1151;
}

Make sure you change the selector to be more specific on required .datepicker elements. Also make sure that this style takes the priority. In my case I had to use z-index: 1151 !important; But I don't recommend it unless you are able to get this working without the !important .