CODEWITHSUNDEEP
inputbootstrap-4grouping
user934820
user934820

Reputation: 1178

Place text fields side by side in input-group Bootstarp

I am new to Bootstrap. I am trying to add an input group in which text fields are place side-by-side. However, it is not grouping well. I am getting extra space between the text fields and button.

enter image description here

Here is my code:

<div class="form-group researchPapers">
    <div class="input-group">
        <div class="col-sm-12 form-group">
            <input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" />
        </div>
        <div class="col-sm-12 form-group">
            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" />
        </div>
        <div class="input-group-addon">
            <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
        </div>
    </div>
</div>

Any help is highly appreciated.

Upvotes: 1

Views: 132

Answers (2)

Swarnadeep
Swarnadeep

Reputation: 341

You can Try this but the problem is you can't get more than one extra text field because it will exceed the div

here's the code

$(document).ready(function() {
  $('#Add').on('click', function() {
    $('#form').append('<div class="col-sm-12 form-group"><input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" /></div><div class="col-sm-4 form-group"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" /></div><div class="col-sm-2 form-group"><input type="text" id="vol[]" name="vol[]" class="form-control" placeholder="Volume" /></div><div class="col-sm-2 form-group"><input type="text" id="issue[]" name="issue[]" class="form-control" placeholder="Issue" /></div><div class="col-sm-2 form-group"><input type="text" id="pages[]" name="pages[]" class="form-control" placeholder="Pages" /></div><div class="col-sm-2 form-group"><input type="text" id="year[]" name="year[]" class="form-control" placeholder="Year" /></div><div class="input-group-addon"><a href="#" class="btn btn-success addMore" id="Add"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a></div></div></div>')
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
  <div class="panel panel-danger">
    <div class="panel-body">
      <form id="test_form">
        <div class="row">
          <div class="col-sm-12 form-group">
            <label for="name">Published Research Articles</label>
          </div>
        </div>

        <div class="form-group researchPapers">
          <div class="input-group" id="form">
            <div class="col-sm-12 form-group">
              <input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" />
            </div>
            <div class="col-sm-4 form-group">
              <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" />
            </div>
            <div class="col-sm-2 form-group">
              <input type="text" id="vol[]" name="vol[]" class="form-control" placeholder="Volume" />
            </div>
            <div class="col-sm-2 form-group">
              <input type="text" id="issue[]" name="issue[]" class="form-control" placeholder="Issue" />
            </div>
            <div class="col-sm-2 form-group">
              <input type="text" id="pages[]" name="pages[]" class="form-control" placeholder="Pages" />
            </div>
            <div class="col-sm-2 form-group">
              <input type="text" id="year[]" name="year[]" class="form-control" placeholder="Year" />
            </div>
            <div class="input-group-addon">
              <a href="#" class="btn btn-success addMore" id="Add"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
            </div>
          </div>
        </div>
        <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
      </form>
    </div>
  </div>
</div>

Upvotes: 0

Awais
Awais

Reputation: 4902

Removed col-sm-12 form form-group and removed margin of last form-group

<div class="form-group researchPapers">
    <div class="input-group">
        <div class="form-group">
            <input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" />
        </div>
        <div class="form-group">
            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" />
        </div>
        <div class="input-group-addon">
            <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
        </div>
    </div>
</div>

CSS

.input-group .form-group:nth-child(2) {
    margin-bottom: 0;
}

For general idea of multiple inputs (Use bootstrap 4 classes for flex i am giving general idea)

<div class="form-group">
            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" style="
    flex-basis: 1;
"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal">
        </div>

CSS

.input-group .form-group:nth-child(2) {
    margin-bottom: 0;
    display: flex;
}
.input-group .form-group:nth-child(2) input + input {
    margin-left: 15px;
}

Upvotes: 1

Related Questions