CODEWITHSUNDEEP
cssangulartwitter-bootstrapbootstrap-4bootstrap-datepicker
San Jaisy
San Jaisy

Reputation: 17128

Bootstrap angular datepicker ngbDatepicker doesnot overflow on the ngbPanelContent

I have use the ngbDatepicker in the form as below

<ngb-panel>
              <ng-template ngbPanelTitle>
                <div class="row">
                  <ui-switch (change)="onChange($event,2)" [checked]="professionalLearningEvent.sportsPractive" size="small"></ui-switch>&nbsp;&nbsp;
                  <label class="accordianTitle" (click)="onAccordianTitleClick(2)">Will your sports practice be
                    affected ?</label>
                </div>
              </ng-template>
              <ng-template ngbPanelContent>
                <div class="container">

<div class="input-group">
  <input class="form-control" [formControl]="control" ngbDatepicker [dayTemplate]="getDayTemplate()" #d="ngbDatepicker" [ngClass]="{ 'is-invalid': isFieldInvalid(control) }">
  <div class="input-group-append">
    <button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

                </div>
              </ng-template>
            </ngb-panel>

The datepicker UI is not overflow. Try to find some solution but not able to.

date picker

Upvotes: 5

Views: 4738

Answers (2)

amansoni211
amansoni211

Reputation: 929

add container='body' to input element.

Example:

<input type="text" autocomplete="off" name="dp" ngbDatepicker container="body">

Github Link

Upvotes: 11

San Jaisy
San Jaisy

Reputation: 17128

The issue was the overflow from the accordian card

Here is the solution just add the below css to override the bootstrap css

 .accordion .card {
      overflow: visible !important;
    }

Upvotes: 5

Related Questions