将带有文本框的引导下拉菜单调整为内容宽度答案

【问题标题】：Adjusting bootstrap dropdown with textbox to content width将带有文本框的引导下拉菜单调整为内容宽度
【发布时间】：2018-12-23 14:49:51
【问题描述】：

我附上了一个带有引导下拉菜单的小提琴。下拉列表顶部有输入文本。如何调整文本框和下拉容器的宽度以适应内容大小？例如我有一个很长的文字“沥青铺设机器 LOOOOOOOOOOOOOONG”。内容不应换行。

当然还有一个最大宽度。

<div class="editableDropdown input-group">
<input type="text" class="col-md-3 gui-input" name="load" id="load"/>
<div style="display:inline-block; width:10px">
    <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" style="width:20px">
        <span class="glyphicon glyphicon-menu-up"></span><span
            class="glyphicon glyphicon-menu-down"></span>
    </button>
    <ul id="color-dropdown-menu"
        class="dropdown-menu dropdown-menu-right scrollable-menu" role="menu">
        <li>Select / Enter Load</li>
        <li>ARTICULATED DUMP TRUCK</li>
   </ul>
</div>

https://jsfiddle.net/haribalaji/jk9x07dr/46/

【问题讨论】：

当我查看您的 JSFiddle 时，我无法选择下拉列表中的任何选项。这是故意的吗？
抱歉，我没有在
选项中包含 ng-click。 Angular ng-click 将根据选择填充文本框。