Datepicker: multiple months out of viewport

[masaanli]

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

[PEsteves8]

I also had this problem. By having two datepickers in a modal, if I experiment with reducing the width of the viewport they end up outside of the modal instead of getting stacked.

[masaanli]

@PEsteves8 How did you do that?

[PEsteves8]

What's your question? Having a datepicker in a modal?
I'm describing a problem that happens, because multiple datepickers aren't responsive.

[masaanli]

@PEsteves8 Ah same issue as me, so u found no fix? to make them responsive?

[PEsteves8]

Nope. I suppose the code has to be edited.

[maxokorokov]

Yeah, currently months are simply displayed horizontally like this without responsiveness:

<datepicker>
  <div class="months" style="display: flex">
    <div class="month" />
    <div class="month" />
    ...
  </div>
</datepicker>

[masaanli]

@maxokorokov do you know a way to make them responsive, atleast not go out of the viewport?

[pkozlowski-opensource]

This is duplicate of #1257

[rickithadi]

any progress on this?

[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.