CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Whitecat
Whitecat

Reputation: 4020

How do make a form inline with nested elements bootstrap?

I am trying to get a form in one line but I am not able to do that successfully.

There are many different types of classes, "form-inline", "input-group", form-group", and "input-group-addon"

I have the following form:

<form role="form-inline" autocomplete="off">
    <div class="entry input-group col-xs-5">
        <div class="input-group">
            <select class="form-control selectBox" name="category">
                <option>Type</option>
                <option>Plot</option>
                <option>Burial</option>
            </select>           
        </div>
        <div id="change_me" class="input-group">
            <div class="input-group-addon"> From </div>
            <div class="form-group">
                <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
            </div>
            <div class="input-group-addon"> To </div>
            <div class="form-group">
                <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
            </div>
        </div>
        <!--<input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />-->
        <span class="input-group-btn">
            <button class="btn btn-success btn-add" type="button">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</form>

When I remove the div with the ID "change_me" the form is in one line. But I need that div so I can remove or add elements to that div based on my select tag.

With the #change_me it looks like this: wrong

Without the #change_me it looks like this: right

I need to still have #change_me in there so when I use selector I can change the contents. (i.e. remove one of the text box and the text so I only have one input information)

In addition if I remove the To the form also changes to be two lines. multiple lines

Upvotes: 0

Views: 559

Answers (1)

Chris Yongchu
Chris Yongchu

Reputation: 789

In Bootstrap, input-group is set by default to display/behave like a table. I would set it up this way and use form-horizontal.

<form role="form-horizontal" autocomplete="off">
  <div class="form-group">
    <div class="label-control col-sm-2">
      <select class="form-control selectBox" name="category">
        <option>Type</option>
        <option>Plot</option>
        <option>Burial</option>
      </select>
    </div>
    <div id="change_me" class="input-group">
      <span class="input-group-addon"> From </span>
      <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
      <span class="input-group-addon"> To </span>
      <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
      <span class="input-group-btn">
        <button class="btn btn-success btn-add" type="button">
          <span class="glyphicon glyphicon-plus"></span>
        </button>
      </span>
    </div>
  </div>
</form>

Here's a codepen for you to review. http://codepen.io/yongchuc/pen/BQKowM

Upvotes: 1

Related Questions