zoukankan      html  css  js  c++  java
  • bootstrap-multiselect样式修改

    问题

    bootstrap-multiselect是一款相当不错的bootstrap风格下拉框组件,但是它的某些样式我不是很喜欢,按钮文本和下拉符号 “” 都是居中的,且下拉列表的宽度也没有跟随变动。

    <script type="text/javascript">
    $(document).ready(function() {
    $('#example-dropRight').multiselect({
    buttonWidth: '400px',
    dropRight: true
    });
    });
    </script>

    需求

    我不太喜欢这个样式,现在我希望按钮的文本和下拉符号 “” 都右对齐,同时下拉列表的宽度与自适应为按钮的宽度。

    编码

    CSS
    .multiselect-wrapper {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: left;
    }

    .multiselect-wrapper button {
    text-align: left;
    }

    .multiselect-wrapper span {
    margin-left: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    }

    .multiselect-wrapper .dropdown-menu {
    100%;
    }

    .multiselect-wrapper .caret {
    position: absolute;
    top: 13px;
    right: 10px;
    0;
    height: 0;
    }

    .multiselect-wrapper label.checkbox, .multiselect-wrapper label.radio {
    padding: 3px 20px 3px 30px !important;
    100%;
    }




    JS 利用buttonContainer属性,以自定义的multiselect-wrapper替换默认的 btn-group样式。
    $(function(){
    $('.multiselect').multiselect({
    buttonWidth: "100%",
    buttonContainer: "<div class='multiselect-wrapper' />"
    });
    });

    HTML
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet">
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf8" />
    </head>
    <body>
    <select name="department">
    <option value="true">物流部</option>
    <option value="false">设计部</option>
    </select>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
    </body>
    </html>


    示例


    补充
    bootstrap中对.dropdown-menu有个最小宽度的设定min- 160px,因此当buttonWidth低于160px时,下来列表的宽度并不会变化,如果有需求可以在.dropdown-menu中添加样式min- 自定义宽度
    ---------------------
    作者:鱼吾
    来源:CSDN
    原文:https://blog.csdn.net/u012143455/article/details/70158557
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    openlayers 注册事件例子
    在Java中直接调用js代码(转载)
    js webapp 滑动事件
    转载 jquery $(document).ready() 与window.onload的区别
    引用.net Core类时T4模板无法加载文件或程序集“ System.Runtime,版本= 4.2.2.0”
    EF Core数据访问入门
    简单服务器端Blazor Cookie身份验证的演示
    使用ASP.NET Core和ImageSharp上传图像并调整其大小
    使用ASP.NET Core将数据导出到Excel
    在.NET Core中检查证书的到期日期
  • 原文地址:https://www.cnblogs.com/telwanggs/p/9871514.html
Copyright © 2011-2022 走看看