Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

form-inline causing overlap of individual form-group components

as I learn more about bootstrap, I am making good progress but I am once again faced with a basic challenge. This is about inline-forms.

Screenshot of problem with inline-form

Please see attached screenshot. As you can see, I have two problems. The first and easily identifiable is that in the 'experience' section - this is an inline form nested within a form-group and the problem is overlapping fields. Ideally they should all be next to each other with a 10px buffer between them. The code for this section is below

 <div class="form-group row-top-buffer">
    <label for="experience" class="col-md-3 control-label">Experience</label>
    <div class="col-md-9 form-inline" role="form">
        <div class="form-group col-md-3">
            <label class="sr-only" for="jobMinExperience">Min Experience</label>
            <input type="text" class="form-control" id="jobMinExperience" placeholder="0" />
        </div>
        <div class="form-group col-md-3">
            <label class="sr-only" for="jobMaxExperience">Max Experience</label>
            <input type="text" class="form-control" id="jobMaxExperience" placeholder="0" />
        </div>
        <div class="form-group col-md-3">
            <label class="sr-only" for="jobExperienceDropDown">Experience</label>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown">
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">years</a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" tabindex="-1" href="#">months</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

The second problem which is not so apparent, is the one in the 'Location' row. I have two rows of components. the first is a simple full-width text input. The second row however is an inline form comprising of multiple components. Here I would like the final text box, for zip code, to stretch until the end of the 1st row - but it abruptly stops short. Code for this secion is provided below

    <div class="form-group row-top-buffer">
    <label for="jobLocation" class="col-md-3 control-label">Location</label>
    <div class="col-md-9">
        <input type="text" class="form-control" id="jobStreet" name="jobStreet" placeholder="Street" />
        <div class="form-inline" role="form" style="padding-top: 9px;">
            <div class="form-group col-md-5">
                <label class="sr-only" for="jobCity">City</label>
                <input type="text" class="form-control" id="jobCity" name="jobCity" placeholder="City" />
            </div>
            <div class="form-group col-md-2 margin-0">
                <label class="sr-only" for="jobState">State</label>
                <?
                    include_once 'stateDropDown.php';
                ?>
            </div>
            <div class="form-group col-md-3 margin-0">
                <label class="sr-only" for="jobZip">City</label>
                <input type="text" class="form-control" id="jobZip" name="jobZip" placeholder="00000" />
            </div>
        </div>
    </div>
</div>
like image 905
ChicagoSky Avatar asked Aug 03 '14 04:08

ChicagoSky


People also ask

What does form-inline do?

form-inline: This class is used to create a radio and checkboxes in a single line.

What is the difference between form group and input group?

Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required. Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.

What is bootstrap inline form?

Bootstrap Inline Form 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 form group row in bootstrap?

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in .form-inline as needed.


1 Answers

Form layout has a lot to do with the class on the form itself, such as form-horizontal, which is the type of form your screen shot reflects. However, your html was mixing inline form classes and combining col classes on the form-group, which is like adding a column class to a row --it's not done. Anyway, this is not your exact form, but it is commented enough to get what you want once you learn it. I put in your dropdowns just for this, but unless you're using some addon that makes selects into dropdowns (there is one) you would use a select menu in a form.

enter image description here

DEMO: http://jsbin.com/fecib/2/edit

<form class="form-horizontal my-form" role="form">
  
 <div class="form-group">
  <label class="col-sm-3 control-label">Location</label>
  <div class="col-sm-9">
   <input type="text" class="form-control" placeholder="location">
  </div><!-- /col-sm-9 -->
 </div><!-- /form-group -->
  
  
 <div class="form-group">
  <div class="col-sm-offset-3 col-sm-9">
    
   <div class="form-group"> <!-- nested form-group acting like row -->
    <div class="col-sm-6">
     <input type="text" class="form-control" placeholder="City">
    </div><!-- /col-sm-6 -->
    <div class="col-sm-4">
     <input type="text" class="form-control" placeholder="State">
    </div><!-- /col-sm-4 -->
    <div class="col-sm-2">
     <input type="text" class="form-control" placeholder="Zip">
    </div><!-- /col-sm-2 -->
   </div> <!-- /nested form-group acting like row -->
    
  </div><!-- /col-sm-offset-3 col-sm-9 -->
 </div><!-- /form-group -->
  
   
  
 <div class="form-group">
  <label for="location" class="col-sm-3 control-label">Priority</label>
  <div class="col-sm-9">
   <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown">
     <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">years</a> </li>
     <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">months</a> </li>
    </ul>
   </div><!-- /dropdown -->
  </div><!-- /col-sm-9-->
 </div><!-- /form-group -->
  
  
 <div class="form-group">
   
  <label class="col-sm-3 control-label">Experience</label>
   
  <div class="col-sm-9">
   <div class="form-group"><!-- nested form-group acting like row -->
    <div class="col-sm-4">
     <input type="text" class="form-control" placeholder="0">
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-4">
     <input type="text" class="form-control" placeholder="0">
    </div><!-- /.col-sm-4 -->
    <div class="col-sm-4">
     <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="jobExperienceDropDown" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="jobExperienceDropDown">
       <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">years</a> </li>
       <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">months</a> </li>
      </ul>
   </div><!-- /dropdown -->
    </div><!-- /.col-sm-4 -->
   </div><!-- /nested form-group acting like row -->
  </div><!-- /.col-sm-9 -->
 </div><!-- /.form-group -->
  
  
 <div class="form-group">
  <div class="col-sm-offset-3 col-sm-9">
   <button type="submit" class="btn btn-default">Sign in</button>
  </div>
 </div>
  
</form>

CSS:

/* ----------- adjusted nested columns grid ----------- */
.my-form .form-group [class*="col-"] .form-group [class*="col-"] {
    padding-left: .5%;
    padding-right: .5%;
}

.my-form .form-group [class*="col-"] .form-group {
    margin-left: -.5%;
    margin-right: -.5%;
}

.my-form .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) {
    margin-bottom: 10px
}

@media (min-width:768px) { 
    .my-form .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) {
        margin-bottom: 0
    }
}

.my-form .form-group [class*="col-"] .form-group {
    margin-bottom: 0
}
like image 158
Christina Avatar answered Dec 02 '22 08:12

Christina