CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
josh_boaz
josh_boaz

Reputation: 2023

Bootstrap place two glyphicons right next to input field

I have a requirement where i need to place two glyphicons right next input field, such that width of input field should decrease to accommodate the two icons. but below code takes the glyphicons to next line.

                                    <div class="row">
                                        <label>Managed Segment GOC</label>
                                        <div style="width:inherit;">
                                                <p>
                                                <input type="text" class="form-control" ng-model="formData.goc" placeholder="Look Up for Managed Segment">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                                </p>
                                            <div class="text-right" >Clear</div>
                                        </div>

                                        <label>Default RLOB</label>
                                        <input type="text" class="form-control" ng-model="formData.rlob" placeholder="">
                                    </div>

Upvotes: 3

Views: 4325

Answers (3)

Horken
Horken

Reputation: 572

I just remove form-control form your first input tag, and replace with col-md-11(you can use any number to replace 11), so the glyphicons stand beside the inputbox now.

code like following:

     <input type="text" class="col-md-11" ng-model="formData.goc" placeholder="Look Up for Managed Segment">
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </p>
        <div class="text-right">Clear</div>

Upvotes: 0

Rani Thakkar
Rani Thakkar

Reputation: 56

You have to put your textbox in another class="col-md-*" Like,

                                        <div>
                                            <p>
                                            <div class="col-md-11">
                                                <input type="text" class="form-control" placeholder="Look Up for Managed Segment" >
                                            </div>
                                            <div class="col-md-1">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                            </div>
                                            </p>
                                        <div class="text-right" >Clear</div>
                                    </div>

Upvotes: 4

anurag
anurag

Reputation: 2246

This might help. 

<div class="row">
    <div class='col-xs-10'>
        <input type='text' class="form-control">
    </div>
    <div class='col-xs-1'>
       <span class="glyphicon glyphicon-arrow-up"></span>
   </div>
   <div class='col-xs-1'>
       <span class="glyphicon glyphicon-arrow-down"></span>
   </div>
</div>

Upvotes: 1

Related Questions