如何在自动完成组件中设置滚动条的最大高度 [英] How to set max-height for the scroll bar in autocomplete component

问题描述

我在我的项目中使用 autocomplete 组件，连同自动完成组件，我在组件内添加了一个 按钮，用于添加新客户，如下图所示.

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

2) Use height to .cdk-overlay-pane with ::ng-deep

::ng-deep .cdk-overlay-pane{
    height: 150px!important;}

参见此处:https://stackblitz.com/edit/angular-9ao75y-fc23aj?file=app/autocomplete-filter-example.css

这篇关于如何在自动完成组件中设置滚动条的最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！