如何在自动完成组件中为滚动条设置最大高度 [英] How to set max-height for the scroll bar in autocomplete component
问题描述
我正在项目中使用 autocomplete 组件,连同自动完成组件一样,我在组件内部添加了 button ,用于添加新客户,如下图所示.
I am using autocomplete component in my project, along with the autocomplete component i have added an button inside the component for adding a new customer as shown in below image.
在这里我想实现两件事:
Here i want to achieve 2 things:
1)即使在滚动(即添加新客户")之后,我也希望使按钮保持固定状态.
1) I want to make button as fixed even after the scroll(i,e Add New Customer).
2)我想减小滚动条的高度. 我怎样才能做到这一点?这是分叉的 stackblitz 链接
2) I want to reduce the height of the scroll bar. How can i do this? Here is the forked stackblitz link
推荐答案
1)使用position:sticky
:
.add-button{
position: sticky;
top: 0;
z-index: 2;
}
2)使用height
到.cdk-overlay-pane
和::ng-deep
::ng-deep .cdk-overlay-pane{
height: 150px!important;}
请参阅此处: https://stackblitz.com/edit/angular-9ao75y-fc23aj?file=app/autocomplete-filter-example.css
这篇关于如何在自动完成组件中为滚动条设置最大高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!