1

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>
Community
  • 1
  • 1
Ram
  • 3,092
  • 10
  • 40
  • 56

2 Answers2

2

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.

Tim Lewis
  • 27,813
  • 13
  • 73
  • 102
2

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;
}
Community
  • 1
  • 1
Christina
  • 34,296
  • 17
  • 83
  • 119
  • Thanks for your answer and explanation I prefer a solution not involving css – Ram Dec 04 '14 at 18:33
  • That's your preference, however GetBootstrap.com, most of the examples, all of the showcase sites, every single theme for sale, all use custom CSS, GetBootstrap.com uses a lot. – Christina Dec 04 '14 at 18:38
  • I did go through getbootstrap.com and implemented this solution and added custom css files. Thanks. – Ram Dec 05 '14 at 15:17