CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Ram
Ram

Reputation: 3091

Match the width of input-group with input in bootstrap

I have created a popup using bootstrap modal. Here is how it looks like

Current modal

I want to make the input and input-group elements to be of same width and start at the same position like mentioned in this question. I have tried using form-group as mentioned in its answer but it doesn't work. I am new to bootstrap and JavaScript.

HTML code

<form class="form-horizontal">
    <div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Enter Information</h4>
                </div>

                <div class="modal-body">                          
                    <div class="form-group">
                        <label class="control-label col-xs-3">Name</label>
                        <div class="controls col-xs-9">
                            <input type="text"  placeholder="Enter Name">
                            &nbsp;<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3">Place</label>
                        <div class="controls col-xs-9">
                            <input type="text"  placeholder="Enter Place">
                            &nbsp;<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3">Cost</label>
                        <div class="controls col-xs-9 input-group">
                            <span class="input-group-addon">$</span>
                            <input type="text"  placeholder="0.00">
                            &nbsp;<span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info" ></span>
                        </div>
                    </div>                      
                </div> <!-- modal-body -->

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</form>

Upvotes: 1

Views: 6312

Answers (2)

Christina
Christina

Reputation: 34652

DEMO: https://jsbin.com/xewevu/1/

enter image description here

Form in wrong location, not using the correct classes on the input and you need to write custom css or use even more wrappers and the grid system, which is really overkill IMO.

The beauty of this approach is that if you decided to use .col-sm instead of xs, then the .help won't stack.

enter image description here

HTML:

<div class="modal fade" id="apstMoleculeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Enter Information</h4>
         </div>
         <form class="form-horizontal">
            <div class="modal-body">
               <div class="form-group">
                  <label class="control-label col-xs-3">Name</label>
                  <div class="controls col-xs-9">
                     <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
                     <input type="text" class="form-control" placeholder="Enter Name">
                  </div>
               </div>
               <div class="form-group">
                  <label class="control-label col-xs-3">Place</label>
                  <div class="controls col-xs-9">
                     <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
                     <input type="text"  class="form-control" placeholder="Enter Place">
                  </div>
               </div>
               <div class="form-group">
                  <label class="control-label col-xs-3">Cost</label>
                  <div class="controls col-xs-9">
                     <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
                     <div class="input-group">
                        <span class="input-group-addon">$</span>
                        <input type="text" class="form-control" placeholder="0.00">
                        </span>
                     </div>
                  </div>
               </div>
            </div>
            <!-- modal-body -->
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
            </div>
         </form>
      </div>
   </div>
</div>

CSS

#apstMoleculeModal .form-group {
 padding-right:20px;
  position:relative;
}

#apstMoleculeModal .help {
 position:absolute;
 right:-8px;
 top:12px;
}

Upvotes: 2

Tim Lewis
Tim Lewis

Reputation: 29258

You're not quite using the classes for col-*-* right, and your inputs are also missing classes. Take a look at this Bootply:

Bootply

Here to see what I mean.

Here's the code (Removed all Modals so I could directly edit it)

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-xs-3">Name</label>
    <div class="col-xs-2">
      <input class="form-control input-sm" placeholder="Enter Name" type="text">
    </div>
    <div class="col-xs-1">
      <span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-3">Place</label>
    <div class="col-xs-2">
      <input class="form-control input-sm" placeholder="Enter Place" type="text">
    </div>
    <div class="col-xs-1">
      <span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-xs-3">Cost</label>
    <div class="col-xs-2">
      <div class="input-group">
        <span class="input-group-addon">$</span>
        <input class="form-control input-sm" placeholder="0.00" type="text">
     </div>
    </div>
    <div class="col-xs-1">
      <span class="glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Help info"></span>
    </div>
  </div>                      
</form>

Please Note:

You may have to change the size of the col-xs-* to fit in the modal correctly.

Upvotes: 2

Related Questions