CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Learning
Learning

Reputation: 20001

Icon breaks when appended to input in bootstrap

I need to append calendar icon at the end of the input box as show in example but it streach the height of the local wrapper while i want it to be the height of input feild

http://codepen.io/anon/pen/bEEEzX?editors=110

  <div class="col-md-3 col-xs-12 ">
    <div class="input-group">
       <label>Start </label>
      <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>

How can i change it so that height of the icon is same as input.

#basic-addon2{
  max-height:40px !important;
  width:30px;
  background-color:red;
  position:absolute;
  right:0;
  margin-bottom:-30px !important;
}

adding above css doesnt help either.

Upvotes: 0

Views: 91

Answers (1)

Deepak Yadav
Deepak Yadav

Reputation: 7069

You are implementing it wrong, check bootstrap's documentation once again. You need to put your icons inside the input-group-addon span and you also messed it with your wrong CSS. check the shared snippet.

<span class="input-group-addon"><span class="glyphicon"></span></span>


#basic-addon2 {
  background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3 col-xs-12 ">
  <label>Start</label>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">
     <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Upvotes: 4

Related Questions