How to solve mat-datepicker-toggle position problem?

1
votes

I've imported material to my Angular 8 project successfully and I'm using bootstrap for styling. I don't plan to use all the material library, only when required. Datepicker from material is one example I need to use.

I've tried to use the mat-datepicker and encountered problem with the alignment of the toggle.

here is the template:

<input type="text" class="form-control" name="my_date" [matDatepicker]="myDatepicker"
 style="width: 80px;"
 #myDate="ngModel" [(ngModel)]="mydate" id="my_date">                                        
 <mat-datepicker-toggle  matSuffix [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
 <mat-datepicker #myDatepicker></mat-datepicker>

The toggle is displayed and functioned correctly but it jump to a new line. I don't wish to use mat form or mat form field cause I'm using boostrap. Any idea how to align the toggle with the same line of the textbox ?

enter image description here

Thanks.

1
cssangularangular-materialmaterial-design
The matSuffix attribute should only be used if your datepicker toggle is in a <mat-form-field> element. - Edric

1 Answers

2
votes

I was able to solve this problem by applying div container for both the input and the toggle and apply this class:

.date_container {        
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
      }