1. ホーム
  2. 質問と答え
  3. Bootstrap-selectはそれ以外のコンテンツをオーバーフローします

Bootstrap-selectはそれ以外のコンテンツをオーバーフローします

2017-01-12 1 views
0

Bootstrap-selectプラグインを使用して9つのドロップダウンのフォームを取得しようとしています。 ドロップダウンは3つの列に表示されます。 すべてのドロップダウンにはラベルが付きます。 すべてのドロップダウンには消去ボタンがあります（input-group-btn）。 ドロップダウンリストには複数のオプションを選択できます。Bootstrap-selectはそれ以外のコンテンツをオーバーフローします

左のドロップダウンで多くのオプションを選択すると、オプションのリストが右にドロップダウンのラベルをオーバーフローさせます。

ドロップダウン以外のすべてのコンテンツが表示されるようにオプションリストを切り捨てることはできますか？ "dropdown-align-right"というオプションは仕事をすると思っていましたが、私の例ではうまくいかないようです。

私はブートストラップ3.3.7、ブートストラップ選択1.12.1、およびjquery 1.9.1を使用します。

以下

コードです：

`<!DOCTYPE html> 
<html lang="nl"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Sample code</title> 
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css"> 
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script> 
</head> 
<body> 

<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post"> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="form-group"> 
       <label for="select_1" class="control-label col-md-5">Select 1</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_1" name="select_1" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_2" class="control-label col-md-5">Select 2</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_2" name="select_2" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_3" class="control-label col-md-5">Select 3</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_3" name="select_3" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="form-group"> 
       <label for="select_4" class="control-label col-md-5">Select 4</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_4" name="select_4" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_5" class="control-label col-md-5">Select 5</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_5" name="select_5" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_6" class="control-label col-md-5">Select 6</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_6" name="select_6" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="form-group"> 
       <label for="select_7" class="control-label col-md-5">Select 7</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_7" name="select_7" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_8" class="control-label col-md-5">Select 8</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_8" name="select_8" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_9" class="control-label col-md-5">Select 9</label> 
       <div class="col-md-7"> 
        <div class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" id="select_9" name="select_9" multiple> 
          <option value=""></option> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</form> 

</body> 
</html>`

出典

2017-01-12 Kristof Nijs

答えて

0

私の母の助けを借りて、私は私の問題の解決策を見つけました。 私はオプションのリストのカットに成功しませんでした。代わりに、最初のオプションの後に "..."が続くカスタムテキストを追加しました。

最初に、入力グループにIDを追加し、データコンテナプロパティを設定して、より多くのオプションを選択するときにドロップダウンが列にとどまるようにしました。

第2に、selectedTextFormatプロパティとcountSelectedTextプロパティを設定して最初のオプションを表示するjavascriptを追加し、複数のオプションを選択するときに "..."を続けました。

以下のコードを参照してください：

<!DOCTYPE html> 
<html lang="nl"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Sample code</title> 
<link rel="stylesheet" href="/includes/bootstrap/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/includes/bootstrap-select/css/bootstrap-select.min.css"> 
<script type="text/javascript" src="/includes/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="/includes/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="/includes/bootstrap-select/js/bootstrap-select.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

    $(".selectpicker").each(function() { 

     var self = this; 

     $(self).selectpicker({ 
      "selectedTextFormat": "count>1", 
      "countSelectedText": function(count,total) { 

       return $(self).val()[0] + " ..."; 

      } 
     }); 

    }); // end each 

}); // end ready 

</script> 
</head> 
<body> 

<form class="form-horizontal" role="form" id="search_form" action="/sample.html" method="post"> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="form-group"> 
       <label for="select_1" class="control-label col-md-5">Select 1</label> 
       <div class="col-md-7"> 
        <div id="select_1_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_1_container" id="select_1" name="select_1" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_2" class="control-label col-md-5">Select 2</label> 
       <div class="col-md-7"> 
        <div id="select_2_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_2_container" id="select_2" name="select_2" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_3" class="control-label col-md-5">Select 3</label> 
       <div class="col-md-7"> 
        <div id="select_3_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_3_container" id="select_3" name="select_3" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="form-group"> 
       <label for="select_4" class="control-label col-md-5">Select 4</label> 
       <div class="col-md-7"> 
        <div id="select_4_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_4_container" id="select_4" name="select_4" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_5" class="control-label col-md-5">Select 5</label> 
       <div class="col-md-7"> 
        <div id="select_5_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_5_container" id="select_5" name="select_5" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_6" class="control-label col-md-5">Select 6</label> 
       <div class="col-md-7"> 
        <div id="select_6_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_6_container" id="select_6" name="select_6" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="form-group"> 
       <label for="select_7" class="control-label col-md-5">Select 7</label> 
       <div class="col-md-7"> 
        <div id="select_7_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_7_container" id="select_7" name="select_7" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_8" class="control-label col-md-5">Select 8</label> 
       <div class="col-md-7"> 
        <div id="select_8_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_8_container" id="select_8" name="select_8" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="select_9" class="control-label col-md-5">Select 9</label> 
       <div class="col-md-7"> 
        <div id="select_9_container" class="input-group"> 
         <select class="form-control selectpicker" data-width="100%" data-size="10" data-dropdown-align-right="auto" data-container="select_9_container" id="select_9" name="select_9" title="" multiple> 
          <option value="option_1">Option 1</option> 
          <option value="option_2">Option 2</option> 
          <option value="option_3">Option 3</option> 
          <option value="option_4">Option 4</option> 
          <option value="option_5">Option 5</option> 
          <option value="option_6">Option 6</option> 
          <option value="option_7">Option 7</option> 
          <option value="option_8">Option 8</option> 
          <option value="option_9">Option 9</option> 
          <option value="option_10">...</option> 
         </select> 
         <span class="input-group-btn"> 
          <button type="button" class="btn btn-default erase_button" title="Erase" alt="Erase"><span class="glyphicon glyphicon-remove"></span></button> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</form> 

</body> 
</html>
を

出典

2017-02-08 13:42:04

関連する問題

 関連する問題