CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Learning
Learning

Reputation: 20001

Bootstrap icon not aligning with input

I am working on a date range control and i want to append icon at the end of the input box but it shows up in new line.

I want all controls like location, start date, end date etc.. in one row for screen larger than 768px and calendar icon appended at the end of start & end input control like it is in the shown on codepen.

Example: http://codepen.io/anon/pen/pggjax

<div class="row">
  <div class="input-daterange input-group" id="datepicker">
    <div class="form-group">

      <div class="col-xs-2">
        <label>Location One </label>
        <select id="location1">
          <option value="1 ">Value1</option>
        </select>
      </div>
      <div class="col-xs-2">
        <label>Location Two </label>
        <select id="location2">
          <option value="1 ">Value1</option>
        </select>
      </div>

      <div class="col-xs-4 ">
        <label>Start </label>
        <input type="text " class="input-sm form-control " name="start " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
      </div>

      <div class="col-xs-4 ">
        <label>End </label>
        <input type="text " class="input-sm form-control " name="start " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
      </div>

      <div class="col-xs-2">
        <button name="submit">SUBMIT</button>
      </div>

    </div>
  </div>
</div>

Upvotes: 0

Views: 1449

Answers (2)

Keval Bhatt
Keval Bhatt

Reputation: 6322

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="input-daterange input-group" id="datepicker">
    <div class="form-group">

      <div class=" col-md-2 col-xs-12">
        <label>Location One </label>
        <select id="location1">
          <option value="1 ">Value1</option>
        </select>
      </div>
      <div class="col-md-2 col-xs-12">
        <label>Location Two </label>
        <select id="location2">
          <option value="1 ">Value1</option>
        </select>
      </div>

      <div class="col-md-3 col-xs-12 ">
        <div class="input-group">
  <input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
  <span class="input-group-addon glyphicon glyphicon-calendar"  id="basic-addon2"></span>
</div>
      </div>

      <div class=" col-md-3 col-xs-12">
             <div class="input-group">
  <input type="text" class="form-control" placeholder="end Date" aria-describedby="basic-addon2">
  <span class="input-group-addon glyphicon glyphicon-calendar"  id="basic-addon2"></span>
</div>
       <!-- <label>End </label>
        <input type="text " class="input-sm form-control " name="start " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>-->
      </div>

      <div class="col-md-2 col-xs-12">
        <button name="submit">SUBMIT</button>
      </div>

    </div>
  </div>
</div>


<p></p>
<p>
  Example
  <div class="form-group ">
    <label class="col-xs-3 control-label ">Date</label>
    <div class="col-xs-5 date ">
      <div class="input-group input-append date " id="dateRangePicker ">
        <input type="text " class="form-control " name="date " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
      </div>
    </div>
  </div>
</p>

Upvotes: 1

Paul Gwamanda
Paul Gwamanda

Reputation: 302

First i would remove input type class input-sm then instead of span class input-group-addon add-on i would add input-group-btn then for the select values use form-group with class form-control instead

        <div class="row">
            <div class="input-daterange input-group" id="datepicker">
                <div class="form-group">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <label for="location1">Location One</label>
                            <select class="form-control" id="location1">
                                <option value="1">Value1</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xs-2">
                        <div class="form-group">
                            <label for="location2">Location Two</label>
                            <select class="form-control" id="location2">
                                <option value="1">Value1</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xs-3">
                        <label>Start </label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="start ">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>
                        </div>
                    </div>

                    <div class="col-xs-3">
                        <label>End </label>
                        <div class="input-group">
                            <input type="text" class=" form-control" name="start ">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>
                        </div>
                    </div>

                    <div class="col-xs-2 btn-group-vertical">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </div>
        </div>

Upvotes: 1

Related Questions