[英]How to display entire option value when hovered in mat-autocomplete
This is demo app that uses mat-autocomplete, I picked from stackoverflow post enter link description here , I want to display option entire value.这是使用 mat-autocomplete 的演示应用程序,我从 stackoverflow 帖子中选择了此处输入链接描述,我想显示选项的整个值。 When the value is long.当值很长时。 I found similar question asked enter link description here but this hasn't solved my problem.我发现类似的问题要求在此处输入链接描述,但这并没有解决我的问题。 I can scroll and see the value, can modify css style so the scroll bar is properly visible.我可以滚动并查看值,可以修改 css 样式以便滚动条正确可见。
Looks like remaining part of scroll bar is hidden!看起来滚动条的剩余部分被隐藏了!
I tried我试过
.mat-option {
z-index:5000;
height:300px;
}
Nothing has worked out!什么都没有解决!
It would be better if the element was shown completely.如果元素完整显示会更好。
Code snippet template.html代码片段template.html
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete" panelWidth="320px">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img class="example-option-img" aria-hidden [src]="state.flag" height="25">
<span>{{state.name}}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
typescript.ts打字稿.ts
states: State[] = [
{
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name: 'California CaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCalifornia',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
}
];
constructor() {
this.filteredStates = this.stateCtrl.valueChanges
.pipe(
startWith(''),
map(state => state ? this._filterStates(state) : this.states.slice())
);
}
private _filterStates(value: string): State[] {
const filterValue = value.toLowerCase();
return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
}
You have 3 ways to solve this你有3种方法来解决这个问题
1.Adding scroll to mat-option
as you already have that in your question 1. 将滚动添加到mat-option
因为您的问题中已经有了
2.Giving width to mat-select
, but this will also be issue if mat-option
is too long. 2.为mat-select
赋予宽度,但如果mat-option
太长,这也会出现问题。
3.This option is to wrap text - add below css to mat-option
3.此选项是换行文本 - 在 css 下方添加到mat-option
.mat-option {
word-break: break-all;
white-space: normal;
height: unset;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.