如何在 Angular 17 的 mat-form-field 和 mat-autocomplete 面板之间添加 16 px 的空间?

how to add a space 17 px between mat-form-field and mat-autocomplete panel of Angular 16?

提问人:Wen Ma 提问时间:9/27/2023 最后编辑:Wen Ma 更新时间:9/27/2023 访问量:29

问:

我正在使用 mat-form-field 和 mat-autocomplete 来实现搜索功能。现在我想在 mat-form-field 和 mat-autocomplete 之间添加一个 17px 的空格,即我想在输入字段和下拉菜单之间添加一些空格,例如:enter image description here

我试过:

    <form class="search-box-container">
      <!-- Search button -->   
      <button mat-button class="search-button" (click)="loadSuggestionsFromEndpoint2()">
        <mat-icon>search</mat-icon>
      </button>

      <mat-form-field class="autocomplete-container">
        <input
          type="text"
          matInput
          [matAutocomplete]="auto"
          [formControl]="searchControl"
          #searchBox
          id="search-box"
          placeholder="YuSearch"
          (keydown.enter)="closeAutocompleteOnEnter()"/>
      </mat-form-field>

      <!-- Reset button -->
      <button mat-button class="reset-button" (click)="resetSearchBar()">
        <mat-icon>close</mat-icon>
      </button>
  
      <mat-autocomplete #auto="matAutocomplete" class="dropdown-panel"
        (optionSelected)="showDetails($event.option.value)">
        <ng-container *ngFor="let suggestion of searchSuggestionsFromEndpoint1">
          <mat-option [value]="suggestion" *ngIf="suggestion.highlight">
            <ng-container *ngFor="let prop of getObjectKeys(suggestion.highlight)">
              <div class="suggestion-container">
                <div class="row">
                  <div class="highlighted-value">
                    <span [innerHTML]="getHighlightedValue(suggestion.highlight[prop]) | highlight: searchControl.value"></span>
                  </div>
                  <div class="nr-info">
                    NR. {{ suggestion._source.Nr }}
                  </div>
                </div>
              </div>
            </ng-container>
          </mat-option>        
        </ng-container>
  
        <!-- Display the "View All" button if displayViewAllButton is true -->
        <!-- Center the "View all" button -->
        <div class="view-all-container" *ngIf="showViewAllButton">
          <button mat-button class="view-all-button"
            (click)="loadAllSearchSuggestionsFromEndpoint1(); $event.stopPropagation();">
            Zeige alle {{ allSearchSuggestionsFromEndpoint1.length }} Treffer an
          </button>
        </div>
      </mat-autocomplete>
    </form>
.dropdown-panel {
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 0 1px 0 rgba(48, 49, 51, 0.05), 0 8px 16px 0 rgba(48, 49, 51, 0.1);

  overflow-x: hidden; /* Disable horizontal scroll bar */

  margin-top: 17px;
  margin-bottom: 17px; /* Add a margin-bottom of 17px to create the distance */
  margin-left: 0; /* Add margin-left to separate from mat-form-field */
}

::ng-deep .mat-autocomplete-panel {
  position: relative;
  margin-top: 17px;
}

但是它们都不起作用,提前感谢您的帮助。enter image description here

css angular mat-autocomplete mat-form-field

评论

0赞 ralph.m 9/27/2023
如果没有一些 HTML 来应用这些样式,没有人能真正提供帮助。Angular 部分基本上无关紧要,因为它是浏览器看到的最终输出。

答: 暂无答案