自舉下拉全寬輸入組

我試圖使用下拉區域託管自定義組件。但是，下拉菜單並非來自標準下拉菜單，而是來自輸入組按鈕。自舉下拉全寬輸入組

我需要這個，因爲我需要一個jstree，因爲我的選擇需求太複雜，無法用簡單的選擇。

這裏是我會它是這樣的：

enter image description here

我想爲下拉區是輸入的整個寬度。我試過把它設置爲100％，但它縫隙無所事事。一個固定的工作，但會打破網站的響應。

這裏是我的HTML：

<div class="col-md-3"> 
    <fieldset> 
     <legend>Options</legend> 
     <div class="form-group"> 
      <div class="input-group"> 
       <input type="text" class="form-control"> 
       <div class="input-group-btn"> 
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
        <ul class="dropdown-menu dropdown-menu-right" role="menu" style="width: 300px;"> 
         <li> 
          aaaa<br /> 
          aaaa<br /> 
          aaaa<br /> 
          aaaa<br /> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
</div>

完整的jsfiddle：https://jsfiddle.net/rry7hr5b/1/

來源

2015-06-02 Remy Grandin

試試這個。 用jquery。

$(document).ready(function(e) { 
    function customwidth() 
     { 
      var formwidth = $('.form-group').width();  
      $('.dropdown-menu').width(formwidth); 
     } 

     customwidth(); 
     $(window).resize(function(e) { 
      customwidth(); 
     }); 
    });

來源

2015-06-02 08:20:45

工作得很好，謝謝，這裏只是一個錯字，一個double ** w **在customwwidth中。 –

哦，是的。更正..和一件事你應該在下拉UL .. .dropdown菜單刪除最小寬度{ 最小寬度：自動（！可能是重要的） } –

不要使用這種UL李爲選擇項自定義引導選擇的有插件可用，請嘗試此

http://silviomoreto.github.io/bootstrap-select/

來源

2015-06-02 07:31:42

謝謝，但那些不符合我的需要。事實是，我需要在其中包含一個jstree。如果它只是一個選擇，我會用一個select2。我更新了這個問題以反映這一點。 –

請爲了解要求添加屏幕截圖。 –

添加了屏幕截圖 –

我發現一種解決方法使用。輸入基團的附加代替。輸入基的BTN。它很整潔，因爲你不需要插件或jQuery。但請注意，整個下拉菜單需要最小寬度。

<div class="input-group"> 
    <input type="text" class="form-control"> 
    <div class="input-group-addon" style="padding:0; border:none; background:none"> 
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" style="border-bottom-left-radius:0; border-top-left-radius:0"> 
      <span class="caret"></span> 
     </button> 
    </div> 
    <ul class="dropdown-menu" role="menu" style="width:100%;"> 
     <li>aa</li> 
     <li>aa</li> 
     <li>aa</li> 
    </ul> 
</div>

看看這個小提琴：https://jsfiddle.net/rry7hr5b/5/

來源

2015-09-24 21:15:21 gustre

不錯！我用這個解決方案。 –

自舉下拉全寬輸入組

回答

相關問題