Datepicker: multiple months out of viewport

Bug description:

Cannot make it work well in a grid system, so for example if i have 1 row and every datepicker is a col-md-4 and I set displayMonths to 6. my idea was that there where blocks like:
x. x. x.
x. x. x.

<ngb-datepicker [startDate]="startDate" [(ngModel)]="dateModel" [displayMonths]="3" ngbDatepicker [navigation]="'none'" [dayTemplate]="customDay"
        [markDisabled]="isDisabled" #dpDate="ngbDatepicker" class="datepicker mb-3" (ngModelChange)="onChange($event)"></ngb-datepicker>

Now when i put 6 datepicker’s they are just in 1 line totally out of the viewport! It doesn’t matter if there is a row arround it or a container or something similar.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.3.5

ng-bootstrap:
20

Bootstrap:
6

1 possible answer(s) on “Datepicker: multiple months out of viewport

  1. This is neither a duplicate nor is it fixed. The other issue is about wrong placement of the popup.
    This issue is about ngb-datepicker with displayMonths set to say 8 makes the months go off screen.
    The widget simply isn’t styled sufficiently.
    For anyone having this issue add this to your component styles:

    :host ::ng-deep .ngb-dp-months {
         flex-flow: row wrap;
         justify-content: flex-start;
    }
    :host ::ng-deep .ngb-dp-month {
         flex: 1 0 auto;
    }

    I think this should be the default style, maybe with modifications.

    Please reopen this issue 🙂

    P.S. I can make a pull request if you think this is a reasonable default.