web-dev-qa-db-ja.com

bootstrap multiselectドロップダウン幅100％

約9か月間、Webアプリで bootstrap multiselect を使用しています。ドロップダウンの幅を次のように100％に設定しました。

    ul.multiselect-container {
      width: 100% !important;
    }

.dropdown-menu {width:100% !important;}

追加の構成オプション（onDeselectAll）があったため、新しいバージョンを入手しました。現在、ドロップダウンの幅は100％ではありません。要素コンソールのスタイリングを見ると、私のcssはまだ機能するはずです。

CSSの写真で.dropdown-menu {width:100% !important}はオーバーライドされていますが、どうしてかわかりません。

何か案は？

cssbootstrap-multiselect
10
BeniaminoBaggins

以下の最小限の例は正常に機能しているため、Bootstrap Multiselectはスタイリングをオーバーライドしません。ただし、_.dropdown-menuおよび.multiselect-containerはまったく同じ要素を参照します（下の例のようにul。したがって、両方のクラスにスタイリングを適用する必要はなく、インスペクターに表示されるものを引き起こす可能性があります。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multiselect').multiselect({
            buttonWidth: '400px'
        });
    });
</script>
<style type="text/css">
    .multiselect-container {
        width: 100% !important;
    }
</style>
</head>
<body>
    <select id="multiselect" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</body>
</html>
15
David Stutz

buttonWidthパラメーターを使用しました.multiselectは、David Stutzに似ています。ただし、'100%'パラメータの右。

<body>
    <select id="multiselect" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#multiselect').multiselect({
                buttonWidth: '100%'
            });
        //caret is in the middle, switch it to right
        $(".caret").css('float', 'right');
        $(".caret").css('margin', '8px 0');
        });
    </script>
</body>
14
Tony L.

セットアップbuttonWidthと.multiselect-containerを試しましたが、うまくいきませんでした。

これは、form-groupクラス内でselectタグを100％に設定する私の方法です。誰かを助けるかもしれません。

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
       width:100%;
 }

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.css" />
        <style>   
                .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
                        width:100%;
                }
        </style>

</head>

<body>
        
        <div class="container">
                
                <div class="row">
                        <div class="col-md-12">
                                <label for="tags">Select tags list</label>
                                <div class="form-group">
                                        <select class="selectpicker input-large" multiple data-live-search="true">
                                                <option>COAL_5CD-PT07</option>
                                                <option>COAL_5CD-PT08</option>
                                                <option>COAL_5CD-PT09</option>
                                                <option>LNG_TI37130</option>
                                                <option>LNG_TI37230</option>
                                                <option>CCP_AB1HAD45CP900_ZQ01</option>
                                        </select>
                                </div>
                        </div>
                </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
        <script      src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>
        <script>

                $(document).ready(function () {

                        $('select').selectpicker();

                });
        </script>
</body>

</html>
0
Hien Nguyen