Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap 3.0 multiple textbox in horizontal form issue

I am trying to display three small text box elements within horizontal form group class. using code

<div class="form-group">
           <label class="col-lg-3 control-label input-sm">Date of Birth:</label>
           <div class="col-lg-4">
              <div class="row">
                 <div class="col-lg-4">
                  <input type="text" id="txt_month" name="txt_month" class="form-control input-sm"  placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" >
                 </div>
                  <div class="col-lg-4">
                   <input type="text" id="txt_day" name="txt_day" class="form-control input-sm"  placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" >
                 </div>
                  <div class="col-lg-4">
                   <input type="text" id="txt_year" name="txt_year" class="form-control input-sm"  placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" >
                 </div>

              </div>

           <p class="help-block"></p>
           </div>
         </div>

Result:

enter image description here

Is there a better approach to display multiple text boxes near to each other. Rest of elements in form display horizontally.

Update#

After using inline form class with lots of other modifications, i got proper result. here is updated code.

<div class="form-group">
           <label class="col-lg-3 control-label input-sm">Date of Birth:</label>
           <div class="col-lg-7">
              <div class="form-inline">
                      <div class="form-group ">
                         <div class="col-lg-3">
                        <label class="sronly" for="txt_month">Enter Month</label> 
                        <input type="text" id="txt_month" name="txt_month" class="form-control input-sm" style="width:60px"  placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" >
                        </div>
                      </div>
                      <div class="form-group">
                          <div class="col-lg-3">
                         <label class="sronly" for="txt_day">Enter Day</label> 
                         <input type="text" id="txt_day" name="txt_day" class="form-control input-sm" style="width:60px"  placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" >
                         </div>
                      </div>
                      <div class="form-group">
                        <div class="col-lg-3">
                          <label class="sronly" for="txt_year">Enter Year</label> 
                          <input type="text" id="txt_year" name="txt_year" class="form-control input-sm" style="width:60px"  placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" >
                        </div>
                      </div>
                 </div>
           <p class="help-block"></p>
           </div>
         </div>

Correct Result:

enter image description here

like image 417
irfanmcsd Avatar asked Sep 06 '13 17:09

irfanmcsd


People also ask

How do I create a horizontal form in bootstrap?

Horizontal formCreate horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label> s as well so they're vertically centered with their associated form controls.

How do I center a text box in bootstrap?

By adding the ” text-center” class of Bootstrap 3 We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.

What is form-inline?

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside. Note: This only applies to forms within viewports that are at least 768px wide! Additional rule for an inline form: Add class . form-inline to the <form> element.

What is input group addon?

input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text". The . input-group-addon class attaches an icon or help text next to the input field.


1 Answers

This answer really helped me work out my form with BS3.

However I wanted it to look like this:

Creating inline forms with no label

So, I amended the above and added the 'sr-only' class to the labels I wanted to hide (so screen-readers still pick them up), and changed the col sizes.

(NOTE: the OP uses 'sronly' class not the 'sr-only' class which doesn't work for me)

<div class="form-group">
  <label class="col-lg-3 control-label ">City & County:</label>
  <div class="col-lg-9">
    <div class="form-inline">
      <div class="form-group ">
        <div class="col-lg-12">
          <label class="sr-only" for="city">City</label> 
          <input type="text" id="city" name="city" class="form-control " placeholder="E.g. Manchester" >
        </div>
      </div> 
      <div class="form-group ">
        <div class="col-lg-12">
          <label class="sr-only" for="county">County</label> 
          <input type="text" id="county" name="county" class="form-control " placeholder="E.g. Lancashire" >
        </div>
      </div>
    </div>
  </div>
</div>
like image 100
al_manchester Avatar answered Oct 05 '22 09:10

al_manchester