关于在运用bootstarp的下拉菜单列表+datatables加上拖动条后 使下拉菜单被挡住的问题...

在项目条件要求下:datatables在页面不发显示列表的内容相对拥挤使表格类容排序图标错位并且视觉效果不好感觉 ,如图:

 所以需要把表格加长加上拖动条,那么问题就出现了,效果如图:

之前我的解决办法是把下拉菜单的z-inde修改成9999,是失败的,,然后后想到

    1 .用滚动条插件尝试 比如 iscroll(失败)
    2 .更加点击的行 控制悬浮块的是放在行的上方 或者下方(意思是判断表格的列表在最后几条的时候把下拉菜单的

class="dropdown"

   属性修改为:

 class="dropup")
但是个人认为第二个解决方法虽然可以解决但是体验不好,列表选项太多,,使得在倒数第六行的时候就要修改下拉列表的属性

所以我用了另一种效果解决问题
思路:在表格加载完后重新定义组件下拉列表的css 把组件变成
 position: fixed;生成绝对定位的元素,相对于浏览器窗口进行定位
然后获得点击button的位置,从新定位 class属性为dropdown-menu的元素位置代码如下:



我想问题的解决方法有很多种,因为之前我一直想在css里面解决,所以当个时间有点久,后来实在没找到css的解决方法所以得到这个相对满意的解决方法,见仁见智,希望对您有所帮助。

 

转载于:https://www.cnblogs.com/wangjunjunjiayuan/p/6489950.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值