4

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:

enter image description here

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.

Improve this question
1
  • did you fin an answer to your problem ? I have the exact same issue ! Commented Jul 28, 2016 at 11:40

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Yes it is. I took a look at your jFiddle and found the problem in bootstrap.min.css, .col-sm-3 {width:25%}. When i change that to 31% it is a perfect fit, so either change width, or remove overflow:hidden from .sidebar element.
If I remove overflow-x:hidden; from sidebar, it still doesn't work. I don't want to edit libraries files like bootstrap or angular, this should not be the way to go.
And, if a library file gets in the way of your css, and you don't like it at all, try overruling the style by putting !important before the ;
If I remove overflow-y I can't scroll anymore in the column. I need the scrolling because I have a lot of content there. Changing the width is not a solution unfortunately.
Could you update the fiddle with more content in there? that way i know what you mean, makes it easier for me to find you a solution.
|
0

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.

Improve this answer

3 Comments

What style exactly needs to be overwritten? Can you please be more specific and/or give a demonstration as working example?
What I said earlier is that, @SliQz gave you some idea to fix that, you can fix that through creating a custom .css file which won't affect your main api but effect your interface & you won't have to use !important for that, coz this way it always overrides the previous styles. I'm sorry, but your fiddle doesn't work, i mean when I click the input field it shows just nothing, though I hope a calender-table would come as you show in the image. If the fiddle can be fixed, I think I can try to fix the css :)
@SliQz suggested to just use a bigger width - this is not really fixing the problem, it is just a workaround. The jsfiddle here works fine for me, what browser do you use? jsfiddle.net/Jth4T/15 - Be sure, that the HTML windows has at least 768px width, otherwise the sidebar won't show.
0

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;
}
Improve this answer

5 Comments

you posted the same jsfiddle which I used in the question, it is not working there :) maybe you forgot to save before posting the link?
sorry bro, my cache sucked my brain :/ your whole 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; } } .dropdown-menu{ position: fixed; margin-top: 95px; z-index: 9999; }
Can u plz clear your cache memory, it does work here like you wanted the date-table will show above the all element. Here it is working like that, but I don't know why its not working in your browser. I've cleared my cache again & got the same result. Did u want like that? tinypic.com/r/13yj6lk/8
in what browser did you try this? For me its working now in chrome, firefox and opera, but not in safari
I use firefox and chrome. I don't use safari. probably some properties should be changed for safari browser. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.