easyui-combobox高度渲染问题

问题:easyui-combobox在高度渲染时,如果通过panelHeight给定高度,则下拉面板的高度始终是不变的,此时若选项较少,则会出现空白版面看起来不协调!
实现结果:高度根据给定的条数或者给定的高度自适应,超出时带滚动条,未超出时自适应。
1、有些网友给出的方法是通过获取下拉面板中选项的条数动态设置面板panelHeight,如下:

$("#id").combobox({
    //.....
    onShowPanel : function(){
            var count = $(this).combobox('getData').length;
            if(count > 10){
                $(this).combobox('panel').height(180);
            }else{
                $(this).combobox('panel').height("auto");
            }
        },
    //.....
})

此方法实现当数据的条数超出10条时,设置下拉面板高度为180,自带滚动条;小于10条时,下拉面板高度自适应。
2、上面的方法可以解决上面所描述的问题,下面给出一种通过easyui-combobox自带属性来解决上述问题:
(1)html(可行)

<input class="easyui-combobox" data-options="panelHeight:'auto',panelMaxHeight:180">

(2)html+js(可行)

<input id="id">

$("#id").combobox({
    panelHeight:'auto',
    panelMaxHeight:180
})

(3)html+js(不可行)
此方法panelMaxHeight属性将无效,下拉面板的高度会永远的自适应,当数据条数过多的时候可能会出现超出浏览器的显示高度

<input id="id" class="easyui-combobox">

$("#id").combobox({
    panelHeight:'auto',
    panelMaxHeight:180
})

(1)、(2)两种方法实现当下拉面板高度超出180时,自带滚动条;小于180时,下拉面板高度自适应;(3)方法不可用。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值