Breite für bootstrap dropdown

Question

Ich versuche, ein Suchsteuerelement mit einem Dropdown mit Bootstrap CSS zu machen. Ich habe versucht, dem Menü eine Breite von 100% zu geben, aber es fügt nur eine Bildlaufleiste hinzu. Gibt es eine Möglichkeit, die Breite des Menüs gleich dem Textfeld zu machen. Ich kann die statische Breite nicht verwenden, da die Seite reagiert und mit verschiedenen Geräten angezeigt wird.

Link fummeln: https://jsfiddle.net/ff0j7wjh/

HTML:

<div class=" col-lg-12"> 
    <div class="input-group"> 
    <input id="searchBox" type="text" class="form-control" aria-label="..."> 
    <div id="searchDrop" class="input-group-btn"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> 
     <ul class="dropdown-menu dropdown-menu-right" style="height:100px; overflow-y: scroll"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     . 
     . 
     . 
     </ul> 
    </div> 
    </div> 
</div> 

JS:

$("#searchBox").click(function(e) { 
    $("#searchDrop").toggleClass("open"); 
    e.stopPropagation(); 
}); 

Answer 1

Bitte versuchen Sie dies.

.custom-drop .input-group-btn{ 
 
    position:static; 
 
} 
 
.custom-drop ul { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class=" col-lg-12 custom-drop"> 
 
    <div class="input-group"> 
 
    <input id="searchBox" type="text" class="form-control" aria-label="..."> 
 
    <div id="searchDrop" class="input-group-btn"> 
 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> 
 
     <ul class="dropdown-menu dropdown-menu-right" style="height:100px; overflow-y: scroll"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     </ul> 
 
    </div><!-- /btn-group --> 
 
    </div> 
 
</div>