Search code examples
angularangular-materialtimepicker

Angular 7. ngx-material-timepicker, toggle button not properly aligned

I am using ngx-material-timepicker to create date and time pickers.

Here is the relevant part of my template. (I have no extra css for the component)

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <mat-form-field>
        <input
          matInput
          [matDatepicker]="picker"
          placeholder="Choose a date"
          [min]="minDate"
          [(ngModel)]="chosenDate"
          (ngModelChange)="dateChanged()"
        />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="col-sm-6">
      <mat-form-field>
        <input
          matInput
          [ngxTimepicker]="timePick"
          placeholder="Chose time"
          [min]="minTime"
          [(ngModel)]="chosenTime"
          (ngModelChange)="timeChanged()"
        />
        <ngx-material-timepicker-toggle
          [for]="timePick"
        ></ngx-material-timepicker-toggle>
        <ngx-material-timepicker
          [defaultTime]="minTime"
          #timePick
        ></ngx-material-timepicker>
      </mat-form-field>
    </div>
  </div>
</div>

The result is this:

enter image description here

The date picker is working just fine, but the toggle button for the time picker is not aligned as it should be. I have followed the official documentation

How to align the clock like the calendar?

Solution

  • try to wrap input and toggle-button in div and set display: flex to that div. Something like this:

    <div>
  <input>
  <ngx-material-timepicker-toggle></ngx-material-timepicker-toggle>
</div>

    Css:

    div { display:flex }