Angular-ui-bootstrap datepicker directive - bring to front

Question

I am having troubles combining the bootstrap grids with the angular-ui date picker. On my page there is a column, which has width smaller than the width of the date picker. The datepicker is cut when the next element starts.

Here is an image of the problem:

The grey area is the left column, containing an input element with dropdown datepicker (which is also described here: http://angular-ui.github.io/bootstrap/ ). When the button is clicked, the datepicker opens like expected, but it is cut 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 a jsfiddle: http://jsfiddle.net/Jth4T/15/

If you use the jsfiddle, please note that the HTML box should have at least 768px width, otherwise the column won't show.

I am pretty sure that this can be fixed with css, but I couldn't get it to work until now. I tried using position: absolute|relative|fixed in combination with z-index and overflow:visible but it didn't work. I also searched in Google and on SO but the problems discussed there seem to differ slightly, the proposed solutions didn't work in my case.

Edit: I need vertical scrolling inside the sidebar, because there are a lot of elements. Here is a jsfiddle with the scrolling active, this functionality should not break. http://jsfiddle.net/Jth4T/24/

I think that the problematic part is combining overflow-x with overflow-y.

Answer 1

Im guessing the is the this line, somewhere in your css

overflow-x:hidden; 

This will cause any horizontal content that is wider than the actial div, to disappear. Please look if the div, holding your datepicker, has this property.

Edit, an other solution would be to change height. You have told me you didn't like to mess with the library so i created this workaround. http://jsfiddle.net/Jth4T/23/

Since the Bootstrap library is now holding back the width of your column, this would be the way to go. Hope this helps, i am incapable to find any other solution for you.

Answer 2

Write custom css for that, override the styling there. That doesn't need to put !important before ; You just have to write the exact styling you need.

Answer 3

I think it's solved now, just check it out plz.

Add these below your css code, but I suggest to make a custom css file for that, so that bootstrap dependency won't affect your application:

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