How do I create a button group with a select, button, button-dropdown and addon with bootstrap

I am trying to create a a group of controls with bootstrap however it does not seem to be rendering properly, I have an example here: https://jsfiddle.net/brightertools/jxafnoyx/

Code:

<form id="form" name="form" action="" method="post">
    <div class="container">
        <div class="form-group">
            <label class="control-label" for="SelectOption">Select an Option</label>
            <div class="input-group">
                <select id="SelectOption" name="SelectOption" class="form-control">
                    <option value="">(select your option)</option>
                </select>
                <div class="input-group-btn ">
                    <button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AddButton"></button>
                    <button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="GroupDropdown"></button>
                    <ul class="dropdown-menu">
                        <li><a id="EditLink">Edit</a>
                        </li>
                        <li><a id="DeleteLink">Delete</a>
                        </li>
                    </ul> <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
                </div>
            </div>
        </div>
    </div>
</form>

One can see that the addon is wrapping, I cannot seem to fix this issue.

Current rendering within jsfiddle:

enter image description here


Source: css

Leave a Reply