How to get input-group-addons side to input. Bootstrap

Question

I have the following code: https://jsfiddle.net/mL4N7/9/

    <fieldset>
        <div class="form-group col-xs-6">
            <div class="col-xs-12">
                <select class="form-control" id="excel-select">
                </select>
                <span class="input-group-addon form-control">
                    <a href="#" boxId="pickExcelBox" class="info">
                        <span class="glyphicon glyphicon-question-sign">
                        </span>
                    </a>
                </span>
            </div>
        </div>
        <div class="form-group col-xs-6">
            <div class="col-xs-12">
                <select class="form-control" id="f-glossary-select">
                </select>
                <span class="input-group-addon form-control">
                    <a href="#" boxId="chooseGlosCat" class="info">
                        <span class="glyphicon glyphicon-question-sign">
                        </span>
                    </a>
                </span>
            </div>
        </div>

        <div class="form-group col-xs-6">
            <div class="col-xs-12">
                <span class="input-group-addon form-control">
                    <span class="glyphicon glyphicon-tags"></span>
                    </span>
                    <input type="number" min="0" step="1" class="form-control" id="processIDColumn" placeholder="P">
                    <span class="input-group-addon form-control">
                        <a href="#" boxId="p" class="info">
                            <span class="glyphicon glyphicon-question-sign">
                            </span>
                        </a>
                    </span>
            </div>
        </div>

        <div class="form-group col-xs-6">
            <div class="col-xs-12">
                <span class="input-group-addon form-control">
                    <span class="glyphicon glyphicon-tags"></span>
                </span>
                <input type="number" min="0" step="1" class="form-control" id="reqIDColumn" placeholder="R">
                <span class="input-group-addon form-control">
                    <a href="#" boxId="r" class="info">
                        <span class="glyphicon glyphicon-question-sign">
                        </span>
                    </a>
                </span>
            </div>
        </div>

        <div class="form-actions col-xs-6">
            <div class="col-md-offset-2 col-md-4">
                <button type="button" class="btn btn-primary" data-trigger="ActionHandler" data-actionhandler-options="'uc':'relink','cont':'relinkMsgContainer', 'url':'test3', 'mod':'f'" >Run</button>

                &nbsp;&nbsp;<button type="button" class="btn btn-success rightOfButton" data-trigger="ActionHandler" data-actionhandler-options="'uc':'relink','cont':'relinkMsgContainer','sim':true, 'url':'test3', 'mod':'f'">Simulate</button>
                                                                    </button>
            </div>
        </div>
    </fieldset>

My goal was to have input fields side by side. Now it works, BUT the input-group-addons aren't side-by-side anymore. How to get this working?

Thanks a lot!

Answer 1

Before my solution, a bit of advice first : Calling your stylesheet directly in the CSS part of JSFiddle won't work all the time. You may however use "Framework & Extensions" => "JQuery 2.1.0" if you need to access Bootstrap. Or the "External Resources" ;). (I used the first option).

That being said, an input-group-addon isn't a form-control. A you're missing the class input-group around all your group elements.

See my revisited JSFiddle.

HTML

<fieldset>
    <div class="form-group col-xs-6">
        <div class="col-xs-12 input-group">
            <select class="form-control" id="excel-select"></select>
            <span class="input-group-addon">
                <a href="#" boxId="pickExcelBox" class="info">
                    <span class="glyphicon glyphicon-question-sign">
                    </span>
                </a>
            </span>
        </div>
    </div>
    <div class="form-group col-xs-6">
        <div class="col-xs-12 input-group">
            <select class="form-control" id="f-glossary-select"></select>
            <span class="input-group-addon">
                <a href="#" boxId="chooseGlosCat" class="info">
                    <span class="glyphicon glyphicon-question-sign">
                    </span>
                </a>
            </span>
        </div>
    </div>
    <div class="form-group col-xs-6">
        <div class="col-xs-12 input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-tags"></span>
            </span>
            <input type="number" min="0" step="1" class="form-control" id="processIDColumn" placeholder="ProcessID-Column" />
            <span class="input-group-addon">
                <a href="#" boxId="processIDColumnBox" class="info">
                    <span class="glyphicon glyphicon-question-sign"></span>
                </a>
            </span>
        </div>
    </div>
    <div class="form-group col-xs-6">
        <div class="col-xs-12">
            <input type="text" class="form-control" name="mobile" id="mobile" placeholder="enter mobile number" title="enter your mobile number if any." />
        </div>
    </div>
    <div class="form-actions col-xs-6">
        <div class="col-md-offset-2 col-md-4">
            <button class="btn btn-sm btn-success" type="submit">
                <i class="glyphicon glyphicon-ok-sign"></i>
                Register
            </button>&nbsp; &nbsp;
            <button class="btn btn-sm" type="reset">
                <i class="glyphicon glyphicon-repeat"></i>
                Reset
            </button>
        </div>
    </div>
</fieldset>

I didn't change your CSS nor your grid system.

Hope it helped ;).