zoukankan      html  css  js  c++  java
  • 关于在运用bootstarp的下拉菜单列表+datatables加上拖动条后 使下拉菜单被挡住的问题

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

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

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

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

    class="dropdown"

       属性修改为:

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

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



    我想问题的解决方法有很多种,因为之前我一直想在css里面解决,所以当个时间有点久,后来实在没找到css的解决方法所以得到这个相对满意的解决方法,见仁见智,希望对您有所帮助。
  • 相关阅读:
    为什么要用设计模式?先看看6大原则(一)
    git版本库的创建和yaf框架环境的部署
    laravel日常小问题
    Session store not set on request.
    phpstudy集成环境安装lavarel
    html中提交表单并实现不跳转页面处理返回值
    document load 与document ready的区别
    定时器优化
    放大镜
    子组件调用父组件的方法并传递数据
  • 原文地址:https://www.cnblogs.com/wangjunjunjiayuan/p/6489950.html
Copyright © 2011-2022 走看看