Как решить проблему положения mat-datepicker-toggle?

Question

Я успешно импортировал материал в свой проект Angular 8 и использую загрузчик для укладки. Я не планирую использовать всю библиотеку материалов, только при необходимости. DatePicker от материал является одним из примеров, которые мне нужно использовать.

Я пытался использовать mat-datepicker и столкнулся с проблемой с выравниванием переключатель.

вот шаблон:

<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>  

Переключатель отображается и функционирует правильно, но он переходит на новую строку. Я не хочу использовать форму циновки или поле формы мата, потому что я использую boostrap. Любая идея, как выровнять тумблер с той же строкой текстового поля?

Спасибо.

Answer 1

Мне удалось решить эту проблему, применив контейнер div для ввода и переключить и применить этот класс:

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