提问人:Wen Ma 提问时间:9/27/2023 最后编辑:Wen Ma 更新时间:9/27/2023 访问量:29
如何在 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?
问:
我正在使用 mat-form-field 和 mat-autocomplete 来实现搜索功能。现在我想在 mat-form-field 和 mat-autocomplete 之间添加一个 17px 的空格,即我想在输入字段和下拉菜单之间添加一些空格,例如:
我试过:
<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;
}
答: 暂无答案
上一个:在输入更改时禁用整个表的呈现
下一个:垫子形状场轮廓颜色和尺寸变化
评论