Issue with dojo selectbox styling

[WorkPlayce]

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>

[JonathanUihlein]

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.