javascript 在展开的剑道下拉菜单上设置CSS样式属性

5jvtdoz2  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(124)

我的列表有所不同,但https://demos.telerik.com/kendo-ui/dropdownlist/index是一个很好的起始参考
我需要设置剑道下拉列表的最大高度。该列表没有页眉,只有N个元素和一个页脚,页脚中包含一个用于添加更多元素的按钮。经过一定的阈值,比如8个项目,我希望它打开垂直滚动条,并将高度固定在这个最大值。我不挑剔的确切高度,但它可能是约400 px。
我可以并且已经设置了“高度”选项,但是在一定的阈值之后,页脚会位于项目列表的下面(和外面)。剑道高度似乎没有考虑到脚的高度,但不能肯定。
Kendo决定将内容放在与原始选择器完全分离的区域中。不幸的是,我需要样式化这个单独的HTML。也就是说,我想对div.k-animation-container和下面的内容进行样式化。而且,最重要的是,我希望不同的下拉菜单样式不同,所以我不能使用通用的样式。
如何设置从.k-animation-container派生的剑道元素的样式?
目前,我通过在页脚添加一个id来作弊,找到它并查找最接近的.k-animation-container。但是我想直接对.k-animation-container进行样式化。
我不确定这是否相关,但我使用Angular构建了这个剑道下拉组件。

xriantvc

xriantvc1#

我不认为你可以直接获得动画容器(除非页面上只能有一个)。您可以通过使用下拉控件的.popup属性来避免插入ID。例如,处理open事件:

open: function(e) {                      
   var $pop = e.sender.popup.element;                      
   $pop.closest('.k-animation-container').css('height', 'auto');
   $pop.css('height', 'auto');
   $pop.find('.k-list').css('height', 'auto').css('max-height', '400px');                      
}

这是一个**DEMO**
更改'NumberOfItems'变量以查看下拉高度的增长,直到最大值为400px。

相关问题