zoukankan      html  css  js  c++  java
  • bootstrap-select selectpicker 下拉宽度设置

    一 背景

      在页面展示中使用bootstrap-select下拉框时,会遇到一些情况导致展示的下拉宽度有些不合适。如:下拉文本框宽度或下拉选择框宽度过宽。

    二 问题

      首先要引入相关的js和css  

      1.下拉文本框宽度

        想要固定“下拉文本框宽度”在 select 标签内加入 data-width="180px" ,则宽度固定在180px

      2.下拉选择框宽度

        2.1想要固定“下拉选择框宽度”在 select 标签内加入 data-maxwidth="180" ,则宽度固定在180px

        2.2想要固定“下拉选择框宽度”在 selectpicker中设置width的值。(如果2.1无效的话)

     <select id="address" name="address" data-style="btn-light" class="selectpicker"
                                                        placeholder="请选择" data-live-search="true" data-maxwidth="180" data-width="180px" ></select>
    
        var obj = $("#" + id);
        obj.selectpicker({
            actionsBox: false,
            liveSearch: true,
             width,//"auto" "200px" 
            size: 7
        });
      //下拉内容初始化

      $.each(data, function (i) {
        if(data[i].hName!=null){
          $(obj).append("<option value=" + data[i].hLid + " data-subtext='(" + data[i].hCode + ")'>" + data[i].hospitalName + "</option>");
        }
      });
       obj.selectpicker('refresh');
      obj.selectpicker('render');

     

    三 插件

      如果还是没有效果可以替换成我的插件试下,我好像以前改过一点,

      https://files.cnblogs.com/files/tong2018/bootstrap-select.zip

  • 相关阅读:
    [Android开发]cocos2dx工程中接入支付宝sdk
    cocos2dx android SDK接入总结
    Cocos2d-vs避免过长编译的小技巧
    math.h里的数学计算公式介绍
    Cocos Code IDE入门指南
    kbengine引擎的安装
    游戏服务端pomelo完整安装配置过程
    cocos2d-x 两个场景间进行传参数
    cocos2d-x 设置全局可变变量
    如何将cocos2d-x项目打包成一个.exe
  • 原文地址:https://www.cnblogs.com/tong2018/p/13924381.html
Copyright © 2011-2022 走看看