Clever Geek Handbook

How to get input group-addons for input. bootstrapping

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. This now works BUT the input-group addons are no longer side-by-side. How it works?

Thank you so much!

+3


source to share


1 answer


Before my solution, first a little advice: calling your stylesheet directly in the CSS JSFiddle part won't work all the time. However, if you need to access Bootstrap, you can use the JQuery 2.1.0 Framework and Extensions "=>" . Or " External Resources ";). (I used the first option).

However, it is input-group-addon

not form-control

. You are missing a 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 haven't changed your CSS and your grid.

Hope it helped;).

+1


source






More articles:


All Articles