CODEWITHSUNDEEP
angularangular2-forms
Atle Kristiansen
Atle Kristiansen

Reputation: 707

angular matDatepicker without mat-form-field

I have implemented the matDatepicker in the following way:

<div class="container">
  <form [formGroup]="addCarForm" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col-lg-6">
          <input class="form-control"> 
      </div>
      <div class="col-lg-6">
          <input matInput [matDatepicker]="picker" placeholder="Choose a date" class="form-control">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
      </div>
      </div>
   </form>
</div>

enter image description here Which makes forces the icon to be below the input field. How can I adjust it to make it be at the end of the input field, and make the input field + the icon be equal to the width of the col (take a look at the image for a illustration)

I have created an example of my problem here:

https://stackblitz.com/edit/angular-xzkvqc?file=src%2Fapp%2Fapp.component.html

Upvotes: 0

Views: 1723

Answers (1)

Joy Biswas
Joy Biswas

Reputation: 6527

Wrap in a flex container so they will never be out of place

<div class="col-lg-6">
  <div style="display:flex"> <!-- wrapping in a flex container -->
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" class="form-control">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </div>
</div>

Updated Stackblitz https://stackblitz.com/edit/angular-nbupcg

Upvotes: 1

Related Questions