Angular material date picker width is too long when we use within fxFlex of FLEX LAYOUT

Question

I am facing some width issue of mat-date-picker element and the issue is when i use mat-form-field within flex layout for normal inputs, alignments are ok. but when i use same mat-form-field with mat-date-picker, alignments are not ok and i am unable to fix it. any help would be appreciated.

date-picker.html

<div fxFlex="100">
  <div fxFlex="40">
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>COURSE TITLE </mat-label>
      </div>

      <div>
        <mat-form-field appearance="outline">
          <input matInput type="text" placeholder="COURSE TITLE" readonly>
        </mat-form-field>
      </div>

    </div>


    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>DATE PICKER </mat-label>
      </div>

      <div>
        <mat-form-field appearance="outline">
          <input matInput [matDatepicker]="picker" placeholder="CLICK TO OPEN CALENDER">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>

    </div>

  </div>
</div>

I have googled for this many times but there is no proper solution, if i want to fix this issue i have to do it manually by setting width for dives and its not correct because setting fixed width for dives is not responsive, alignments would be inappropriate.in above code fxLayoutAlign="space-between center" is taking care of alignments of dives.

date-picker.html

<div fxFlex="100">
  <div fxFlex="40">
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>COURSE TITLE </mat-label>
      </div>

      <div>
        <mat-form-field appearance="outline">
          <input matInput type="text" placeholder="COURSE TITLE" readonly>
        </mat-form-field>
      </div>

    </div>


    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div fxFlex="30">
        <mat-label>DATE PICKER </mat-label>
      </div>

      <div fxFlex="40">
        <mat-form-field appearance="outline">
          <input matInput [matDatepicker]="picker" placeholder="CLICK TO OPEN CALENDER">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>

    </div>

  </div>
</div>

In above code i have set width using fxFlex for dives, here it works fine but not responsive.its fixed only for laptop and if i open the same UI in dektop or tab alignments going wrong. my question is why mat-form-field width is increasing.i heard like mat-datepicker-toggle is taking some extra space of 1em with mat-form-field link (https://github.com/angular/components/issues/11663).how to fix this and i do not want to do it manually. any help would be appreciated.

score 2 · Answer 1 · answered Jul 14 '21 at 18:08

Try this solution, I have made changes in SCSS.

This is my HTML.
<div fxFlex fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.sm="0"  fxLayoutGap.xs="0" >

  <mat-form-field fxFlex appearance="fill" class="datepicker">
    <mat-label>Updated From</mat-label> 
    <input matInput [matDatepicker]="ufrom">
    <mat-datepicker-toggle matSuffix [for]="ufrom"></mat-datepicker-toggle>
    <mat-datepicker #ufrom></mat-datepicker> 
  </mat-form-field>

  <mat-form-field fxFlex appearance="fill" class="datepicker">
    <mat-label>Updated To</mat-label> 
    <input matInput [matDatepicker]="uto">
    <mat-datepicker-toggle matSuffix [for]="uto"></mat-datepicker-toggle>
    <mat-datepicker #uto></mat-datepicker> 
  </mat-form-field>

</div>


This is my SCSS.

/* Datepicker width issue */
.datepicker { 
    .mat-form-field-flex {
        display: inherit;
    }
    .mat-form-field-prefix, .mat-form-field-suffix { 
        width: 35px;
        float: right;
        position: absolute !important;
        top: 10px;
        right: 5px;
    }
}

.mat-form-field-infix {
    width: auto !important;
}

score 0 · Answer 2 · answered Jul 24 '20 at 12:20

Try setting flex to the mat-form-field element without the enclosing div

<div fxFlex="100">
  <div fxFlex="40">
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>COURSE TITLE </mat-label>
      </div>
      <div>
        <mat-form-field appearance="outline">
          <input matInput type="text" placeholder="COURSE TITLE" readonly>
        </mat-form-field>
      </div>
    </div>

    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div fxFlex="30">
        <mat-label>DATE PICKER </mat-label>
      </div>

      <mat-form-field appearance="outline" fxFlex="40">
        <input matInput [matDatepicker]="picker" placeholder="CLICK TO OPEN CALENDER">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </div>

  </div>
</div>

Please read question carefully, i know this method. i dont want to do it manually by setting fxFlex values for div or to other elements. i am using fxLayoutAlign to give alignments. it works for text mat-form-fields but not for date-picker. for date picker the width of form-field is bit higher than width of date-picker form-field. i mean it should handle automatically when we use fxLayoutAlign. — pk_teckie, Jul 28 '20 at 07:11

Angular material date picker width is too long when we use within fxFlex of FLEX LAYOUT

2 Answers2