Bootstrap 3 Placing Icon inside input field

Question

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box.

My html looks like this:

<div class="col-md-12">
    <div class='right-inner-addon col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker"
               data-date-format="yyyy-mm-dd"/>
        <i class="fa fa-calendar"></i>
    </div>
</div>

I have tried position: absolute like this:

.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}

But when I do it will look great in one spot, but will not be positioned correctly in another instance.

I have also tried to see if I could use text-indent to see if this would work throughout, but it had the same effect.

.right-inner-addon i, 
.form-group .right-inner-addon i {
    display: inline-block;
    z-index: 3;
    text-indent: -15px;
    font-size: 1.3em;
}

Here's a jsFiddle that might help

Possible duplicate of http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box — scarecrow, Apr 07 '14 at 13:16
@scarecrow No it is not, because that did not work. I have read that article extensively and have tried everything they have. But it will work in some placed, but not in others with the same exact code. — zazvorniki, Apr 07 '14 at 13:17
seems there is a working solution there.. http://jsfiddle.net/KyleMit/cyCFS/ — scarecrow, Apr 07 '14 at 13:18

score 10 · Answer 1 · edited Jun 20 '20 at 09:12

10

Using bootstrap's native validation states is probably preferable to writing custom CSS here.
^{And I'm pretty sure that I'm the one who came up with the CSS in question.}

Just use .has-feedback on your form-group and .form-control-feedback on your icon:

<div class="form-group has-feedback">
    <label class="control-label sr-only">DatePicker</label>
    <input type="text" class="form-control date-picker" /> 
    <i class="fa fa-calendar form-control-feedback"></i>
</div>

Demo in jsFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 24 '14 at 22:03

KyleMit

30,350
66
462
664

@zazvorniki, No need for a downvote here buddy. You can *use* the classes provided by the validation states to provide visual feedback on your input control about the purpose of that control. It doesn't necessarily have to be about validation per se. It's just a feedback mechanism. And it does so out of the box without having to write custom css. I don't get what your negative reaction here is? You asked about how to position an icon inside of an input box. Does this answer not accomplish that? – KyleMit Jul 25 '14 at 18:39
@zazvorniki, ok, well I posted this answer 20 hours ago. You commented 10 minutes ago at 18:32:56, and I got a downvote 5 seconds later at 18:33:01, so I just assumed. – KyleMit Jul 25 '14 at 18:45
I did not down vote, I don't believe in the down vote button unless it's just a remarkably awful answer. I guess what I should have said here is that while the validation method is a way to accomplish this, other people including myself may not want what comes with the validation states. For example I was working with a calender here, it would be odd if only one field had the states and the others did not. Also, I never quite understood answering a question that already had a solution and was posted months ago... – zazvorniki Jul 25 '14 at 18:45
You know what they say about people who assume... :) – zazvorniki Jul 25 '14 at 18:46
I was looking how to place icon inside input element. This answer is great, thanks a lot. – FrenkyB Apr 08 '16 at 14:27

score 6 · Accepted Answer · edited Jul 24 '14 at 22:12

You can use input-group add-on with a input-group-btn.

<div class="col-md-12">
    <div class='input-group add-on col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker" 
               data-date-format="yyyy-mm-dd"/>
        <div class="input-group-btn">
            <button class="btn btn-default">
                <i class="fa fa-calendar"></i>
            </button>
        </div>
    </div>
</div>

With a little CSS to hide the button border:

/* remove border between controls */
.add-on .input-group-btn > .btn {
    border-left-width: 0;
    left:-2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
    -webkit-box-shadow: none; 
            box-shadow: none;
    border-color:#cccccc; 
}

Demo: http://bootply.com/128059

Thank you! I was able to do this with bootstrap3, but no matter how hard I looked I could not figure it out with bootstrap3. Thank you so much for your help! — zazvorniki, Apr 07 '14 at 13:22
skelly, I [originally went with an input group with the the inner borders removed as well](http://stackoverflow.com/revisions/18839305/4). However, as you know, this makes focus effects tricky, or in your case, non-existant. I think validation states offers a better UI. See my answer below. — KyleMit, Jul 24 '14 at 22:15

score 2 · Answer 3 · edited May 23 '17 at 12:18

2

Check this fiddle, adapted from this answer

The difference being that in your case the <i> was placed after <input>. Swapping them makes it work. That's why the positioning was creating a mess as opposed to the cited answer.

edited May 23 '17 at 12:18

Community

1
1

answered Apr 07 '14 at 13:28

scarecrow

6,624
5
20
39

I have gone over this code extensively. I originally had the i before the input and that was when I started having problems with it. The problem is the position absolute, some places it will appear fine, but as soon as I move this to another location the positioning messes up and I really don't want to reposition it every time I want to include a calendar. The above solution worked perfectly and no positioning was necessary. – zazvorniki Apr 07 '14 at 14:06

score 0 · Answer 4 · answered Mar 28 '17 at 09:40

In above answers, Input click works but click on i tag is not working. so I have added my code in answer of @KyleMit

<div class="form-group has-feedback">
  <input type="text" name="txtDatepicker" class="form-control date-picker" /> 
  <i class="glyphicon glyphicon-calendar" 
    onclick="javascript:$('input[name=txtDatepicker]').data('DateTimePicker').show();">
  </i>
</div>

I changed css little bit for my UI. You also can change it.

<style>
  .right-inner-addon {
    position: relative;
   }

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        left: 256px;
        padding: 14px 12px;
    }
</style>

Bootstrap 3 Placing Icon inside input field

4 Answers4

Demo in jsFiddle

Linked

Related