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

[OzymandiasTheGreat]

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.

[rickithadi]

any progress on this?