角材料自动完成错误位置

时间:2018-07-12 13:39:44

标签: angular angular-material

我想在搜索栏后面放置自动完成面板,但是总是有文件或消息“在它们之间找不到文件”。

** HTML:**

<div class="row">
  <div class="form-group col-md-offset-2 col-md-8 col-md-offset-2 text-center">
    <form>
      <mat-form-field class="input-sm form-control">
        <input type="text" 
          [(placeholder)]="placeholder" 
          matInput
          matAutocompleteOrigin 
          [formControl]="myControl" 
          [matAutocomplete]="auto" 
          (click)="onClick()" 
          (blur)="onBlur()" 
          (keyup)="search($event)">

          <mat-autocomplete  #auto="matAutocomplete" autoActiveFirstOption class="col-md-offset-2 col-md-8 col-md-offset-2">
              <mat-option  *ngFor="let option of filteredOptions | async" [value]="option" >
               {{ option }}
              </mat-option>
          </mat-autocomplete>

      </mat-form-field>
      <label class="checkbox-inline"><input type="checkbox" [formControl]="ControlCSV" (click)="onClickCSV()">CSV</label>
      <label class="checkbox-inline"><input type="checkbox" [formControl]="ControlPictures" (click)="onClickPictures()">Pictures</label>
    </form>
  </div>
</div>

<div *ngIf="documentSources" class="row">
  <app-documentlist [documentSources]="documentSources"></app-documentlist>
</div>

我无法发布屏幕截图,所以这是链接https://i.imgur.com/VOOGWMq.png

谢谢!

1 个答案:

答案 0 :(得分:0)

Angular Material和Bootstrap CSS不能很好地混合在一起。考虑删除引导程序