Angular -ui-bootstrap datepicker directive - bring to the fore

Question

I'm having trouble merging boot grids with angular -ui date picker. My page has a column whose width is less than the width of the date picker. The date sensor is cut out when the next item starts.

Here is a picture of the problem:

The gray area is the left column containing the input element with the drop-down name datepicker (which is also described here: http://angular-ui.imtqy.com/bootstrap/ ). When the button is pressed, the date picker opens, as expected, but is cut out on the right side.

Here is the HTML:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Test</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="nav nav-sidebar-header">Header</div>
            <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="dt" is-open="opened"
                       close-text="Close"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="openCalendar($event)"><i
                        class="glyphicon glyphicon-calendar"></i></button>
            </span>
            </p>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        </div>
    </div>
</div>

JavaScript:

var modellingApp = angular.module('modellingApp', ['ui.bootstrap']);

modellingApp.controller('ModellingController', function ($scope) {

    $scope.today = function () {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.openCalendar = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
    }

});

CSS

@media (min-width: 768px) {
    .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        background-color: #f5f5f5;
        border-right: 1px solid #eee;
    }
}

I also prepared jsfiddle: http://jsfiddle.net/Jth4T/15/

jsfiddle, , HTML 768 , .

, css, . position: absolute|relative|fixed z-index overflow:visible, . Google SO, , , , , .

Edit: , . jsfiddle , . http://jsfiddle.net/Jth4T/24/

, overflow-x -y.

Answer 1

, , - css

overflow-x:hidden; 

, , actial div. , div, datepicker, .

, . , , . http://jsfiddle.net/Jth4T/23/

Bootstrap , . , , - .

Answer 2

CSS , . !important ; , .

Answer 3

I think he decided now, just check it plz.

Add the css code below, but I suggest creating your own css file for it, so the bootstrap dependency will not affect your application:

.dropdown-menu{
    position: fixed;    
    margin-top: 95px;
    z-index: 9999;
}