Topic: MDB Date and Time Picker Showing out of Collapsible Area

Frank Kreutzer free asked 3 years ago

Actual behavior

I have a section within a mdbCollapse at the very end. When I expand the collapsible div, the last two fields, which are the Date and Time Picker components, extend past and out of the collapsible container.

Resources (screenshots, code snippets etc.)

The container starts as this:

<div class="recurrence-bg">
    <button mdbBtn color="link" class="waves-light w-100 mx-0 px-3" type="button"
            (click)="toggleRecurringOptions()" mdbWavesEffect>
      <span class=""><span class="float-left text-capitalize">Recurrence Options</span> <i class="fa float-right mt-1" [ngClass]="{'fa-chevron-up': eventCollapse, 'fa-chevron-down': !eventCollapse}"></i></span>

    <div class="" mdbCollapse #recurringOptions="bs-collapse">...</div>

Then the last section looks like this (some divs may not align as I edited the code block to remove unneeded sections - so this won't be the cause of the issue):

<div *ngIf="isRecurringOptions" class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="recurringStartDate">Start Date <span class="red-text">*</span></label>
              <div class="md-form">
                <mdb-date-picker [placeholder]="'Select a start date...'" formControlName="startDate" name="recurringStartDate"
                (inputFieldChanged)="validateDaysInMonth($event)" [options]="startDateOptions"></mdb-date-picker>
          <div class="col-md-6">
            <div class="form-group">
              <div *ngIf="eventModalForm.controls['patternEndType'].value === 2">
                <label for="repeatEvery">End After <span class="red-text">*</span></label><br />
                <input type="text" formControlName="occurrences" class="form-control custom-form-control d-inline"
                       id="repeatEvery" style="max-width: 50px"><span class="font-weight-400 d-inline-block ml-2">occurrences</span>
              <div *ngIf="eventModalForm.controls['patternEndType'].value === 3">
                <label for="recurringEndDate">End By <span class="red-text">*</span></label>
                <div class="md-form">
                  <mdb-date-picker [placeholder]="'Select an end date...'" formControlName="endDate" name="recurringEndDate"


The thing I've noticed is that if I change the md-form class to a regular form-group this display issue doesn't exist (though this creates another issue as discussed here:

Here is a screenshot of how the UI looks:

Arkadiusz Idzikowski staff commented 3 years ago

We tried to reproduce this problem on our end but without success. Could you provide a simple example with full HTML/TS code and custom styles (if used) used in the view with broken layout?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: Yes