如何解决Mat-autocomplete 面板应该与主机输入的宽度相同,或者更宽,具体取决于内容
我有一个有角度的自动完成树组件,但我的自动完成面板宽度有问题。
- 一旦内容比面板宽,面板就会增长。我为此使用了
[panelWidth] = "auto"
,而且效果很好。 - 面板应具有主机输入的最小宽度。也可以为此使用 panelWidth,但随后我失去了第一点的功能。
从 Change the mat-autocomplete width?) 我看到我可以使用 [panelWidth] = "auto"
。
我知道我可以使用 css 样式
.mat-autocomplete-panel{min-width: "300px"}
但不知道如何获取特定输入的宽度。
所以我求助于javascript。我在文档中看到 AutocompletePanel 公开了面板 ElementRef,但是无论我做什么,这个值似乎都未定义?使用 @ViewChild
获取此值的正确方法是什么?
我有以下在 opened
事件上运行的代码。
<mat-autocomplete #autocomplete (opened)="opened()" [panelWidth]="auto" #auto="matAutocomplete">
@ViewChild("auto") autocomplete: MatAutocomplete;
@ViewChild("autoTreeInput") autoTreeInput: ElementRef;
opened = () => {
setTimeout(()=>{
let p = this.autocomplete.panel?.nativeElement; //always null because panel is undefi
console.log("opened",p,this.autocomplete);
if (!p ) return
p.style.minWidth =
this.autoTreeInput.nativeElement.getBoundingClientRect().width + "px";
},1000)
};
解决方法
我已经查看了您的 stackblitz 示例。
看起来更像是一个 css 问题。
在 autocomplete-simple-example.css
文件上试试这个
.example-form {
min-width: 150px;
// max-width <-- remove it to use 100% of width
width: 100%;
}
.example-full-width {
width: 100%; // add this to use all width.
transition: width 0.5s ease;
}
.mat-focused {
width: 270px;
}
这里有一个工作示例:stackblitz
编辑
您可以将任何有效的 css 添加到 width css
。通过这种方式添加了 calc(100% - 60%)
以使其与输入相同
.example-form {
min-width: 150px;
width: 100%;
}
.example-full-width {
width: 100%;
transition: width 0.5s ease;
}
.mat-focused {
width: 100%;
}
<mat-autocomplete (opened)="opened()" panelWidth="calc(100% - 60px)" </mat-autocomplete>
,
面板 elementRef 在(未开启)opened
事件触发后显示。更具体地说,在面板被添加到 DOM 之后。因此,只需添加一个 setTimeout
即可使元素正常工作。不幸的是,这意味着元素以错误的宽度显示,然后跳转到输入的宽度。
可能有更好的解决方案,但这就是我现在要做的。
opened = ()=> {
let inputWidth = this.autoInput.nativeElement.getBoundingClientRect().width
setTimeout(()=>{
let panel = this.autocomplete.panel?.nativeElement;
if (!panel ) return
panel.style.minWidth = inputWidth + "px";
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。