0

I would like to align the select button (Language) with the datetimepicker input. I would like to keep the overall look and functionallity of "form-horizontal". I have tried to place an inline form within the horizontal form but to no avail.

    <form class="form-horizontal" id="postForm" action="/news/add" method="POST" enctype="multipart/form-data" onsubmit="return postForm()">

  <div class="form-group">
    <label for="inputTitle" class="col-sm-2 control-label">Title</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputTitle" name="title" placeholder="Title">
    </div>
  </div>

  <div class="form-group">
    <label for="datetimepicker" class="col-sm-2 control-label">Publish Date</label>
    <div class='input-group date col-sm-3'  id='datetimepicker'>
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
      <input id="publishDate" type='text' class="form-control" name="time" />  
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Language <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">English</a></li>
        <li><a href="#">French</a></li>
      </ul>
    </div>
  </div>

  <div class="form-group">
    <legend>Create Content</legend>
    <textarea class="input-block-level" id="summernote" name="content" rows="18"></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Save changes</button>
  <button type="button" id="cancel" class="btn">Cancel</button>
  <button type="reset" class="btn btn-danger" >Reset</button>
</form>

1 Answer 1

1

You need to wrap your input-group in the col-sm-3, instead of tacking the col class onto the input-group. Then you can wrap your btn-group in its own col class. The added benefit is this is going to also fix the alignment issue between the title and date picker inputs.

<form class="form-horizontal" id="postForm" action="/news/add" method="POST" enctype="multipart/form-data" onsubmit="return postForm()">

    <div class="form-group">
        <label for="inputTitle" class="col-sm-2 control-label">Title</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="inputTitle" name="title" placeholder="Title">
        </div>
    </div>

    <div class="form-group">
        <label for="datetimepicker" class="col-sm-2 control-label">Publish Date</label>
        <div class="col-sm-3">
            <div class="input-group date"  id="datetimepicker">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                  <input id="publishDate" type='text' class="form-control" name="time" />  
            </div>
        </div>
        <div class="col-sm-3">
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Language <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
              </ul>
            </div>
        </div>
    </div>

    <div class="form-group">
        <legend>Create Content</legend>
        <textarea class="input-block-level" id="summernote" name="content" rows="18"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Save changes</button>
    <button type="button" id="cancel" class="btn">Cancel</button>
    <button type="reset" class="btn btn-danger" >Reset</button>
</form>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.