Check out this fiddle I made with a Bootstrap dropdown. The dropdown includes an input text box at the top. How can I adjust the width of both the textbox and dropdown container to fit the content size? For example, if I have a long text like 'ASPHALT LAY DOWN MACHINE LOOOOOOOOOOOOOONG', I don't want the content to wrap.
And there should definitely be a maximum width set as well.
<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>