Time Picker hour/minute picker overlay is getting cut off when embedded in a tab content

You can recreate the issue at http://env-1124382.jelastic.servint.net/restaurant/?timezone=Etc/GMT0. Click on the Add Open Close Times button on the monday tab and the issue can be recreated

Open Time

Close Time

Complete JSP Page-> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

Name

${status.errorMessage}

Time Zone

Currency

Online Ordering Allowed

Maximum Order Amount

        <script>
            function makeDayActiveInactive(inputElement) {

                if ($(inputElement).hasClass('active')) {

                    $(inputElement).removeClass('active');

                }

                else {

                    $(inputElement).addClass('active');
                }

            }
        </script>

        <div class="control-group">
            <label class="control-label">Hours Open</label>
            <div class="controls">
                <c:forEach items="${days}" var="day">
                    <button class="btn btn-s"
                        onClick="event.preventDefault()">${day}</button>

                    <script type="text/javascript">
                        $('#timepicker1').timepicker();
                    </script>
                </c:forEach>
            </div>
        </div>

        <div id="content">
<ul id="tabs" class="nav nav-pills" data-tabs="tabs">
    <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
    <li><a href="#orange" data-toggle="tab">Orange</a></li>
    <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
    <li><a href="#green" data-toggle="tab">Green</a></li>
    <li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="red">
        <div class="control-group">

            <div class="controls form-inline">
                <label>Open Time</label>
                <div class="input-append bootstrap-timepicker">
                    <input id="timepicker1" type="text" class="input-small"> <span
                        class="add-on"><i class="icon-time"></i></span>
                    <script type="text/javascript">
                        $('#timepicker1').timepicker();
                    </script>

                </div>
                <label>Close Time</label>
                <div class="input-append bootstrap-timepicker">
                    <input id="timepicker2" type="text" class="input-small"> <span
                        class="add-on"><i class="icon-time"></i></span>
                    <script type="text/javascript">
                        $('#timepicker2').timepicker();
                    </script>

                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

        <!-- Button -->
        <div class="control-group">
            <div class="controls">
                <form:button class="btn btn-primary" type="submit"> Submit</form:button>
            </div>
        </div>
    </fieldset>
</form:form>

jdewit / bootstrap-timepicker

Time Picker hour/minute picker overlay is getting cut off when embedded in a tab content #146