Using dojo select object:
When an option is selected it extends the width past the predefined width:
using combination of bootstrap and select object.
Here is Javascript code which builds the objects:
findDiv.innerHTML =
"<div id=\"panel12\" class=\"divContent\">" +
"<div class=\"colBar \">" +
"<div class='row'>" +
"<div class='form-group clearfix'>" +
"<label class='control-label col-lg-3 col-md-3 col-sm-12'>Filter layer:</label>" +
"<div class='col-lg-9 col-md-9 col-sm-12' id='layerFilterNamesSelectDiv'>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='row'>" +
"<div class='form-group clearfix'>" +
"<label class='control-label col-lg-3 col-md-3 col-sm-12'>Filter attribute:</label>" +
"<div class='col-lg-9 col-md-9 col-sm-12' id='layerFilterAttributeSelectDiv'>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='row'>" +
"<div class='form-group clearfix'>" +
"<label class='control-label col-lg-3 col-md-3 col-sm-12'>Filter value:</label>" +
"<div class='col-lg-9 col-md-9 col-sm-12'>" +
"<input class='form-control input-sm' type=\"text\" id=\"layerFilterValue\" size=\"5\" />" +
"</div>" +
"</div>" +
"</div>" +
"<div class=\"btn-group\" >" +
"<button id=\"layerFilterApply\" class=\"btn btn-primary btn-sm\"><img src=\"images/find_find.png\" width='90' /></button>" +
"<button id=\"layerFilterClear\" class=\"btn btn-primary btn-sm\"><img src=\"images/find_clear.png\" width='90' /></button>" +
"</div>" +
"<br/><br/>" +
"</div>" +
"</div>";
var div = dom.byId("layerFilterNamesSelectDiv");
var select = new Select({ id: "layerFilterNamesSelect", class: "form-control input-sm", size: "5" }).placeAt(div).startup();
div = dom.byId("layerFilterAttributeSelectDiv");
select = new Select({ id: "layerFilterAttributeSelect", class: "form-control input-sm", size: "5" }).placeAt(div).startup();
Here is the dom in chrome inspector:
<div class="col-lg-9 col-md-9 col-sm-12" id="layerFilterNamesSelectDiv">
<table class="dijit dijitReset dijitInline dijitLeft dijitDownArrowButton form-control input-sm dijitSelect dijitValidationTextBox" data-dojo-attach-point="_buttonNode,tableNode,focusNode,_popupStateNode" cellspacing="0" cellpadding="0" role="listbox" aria-haspopup="true" tabindex="0" id="layerFilterNamesSelect" widgetid="layerFilterNamesSelect" aria-expanded="false" aria-invalid="false" style="-webkit-user-select: none;" popupactive="true" aria-owns="layerFilterNamesSelect_menu">
<tbody role="presentation">
<tr role="presentation">
<td class="dijitReset dijitStretch dijitButtonContents" role="presentation">
<div class="" data-dojo-attach-point="" role="presentation"><span role="option" class="dijitReset dijitInline dijitSelectLabel dijitValidationTextBoxLabel ">Health-Current Ebola Outbreaks (Cases)</span></div><div class="dijitReset dijitValidationContainer">
<input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " type="text" tabindex="-1" readonly="readonly" role="presentation">
</div><input type="hidden" data-dojo-attach-point="valueNode" value="Health-Current Ebola Outbreaks (Cases)" aria-hidden="true">
</td>
<td class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer" data-dojo-attach-point="titleNode" role="presentation">
<input class="dijitReset dijitInputField dijitArrowButtonInner" value="▼ " type="text" tabindex="-1" readonly="readonly" role="presentation">
</td>
</tr>
</tbody>
</table>
</div>
What does your CSS look like?
What javascript-specific fixes have you tried so far?
I've seen a few threads about this over at the DOJO community site.