newkid101 newkid101 - 5 months ago 5
CSS Question

Weird issue with input element

So I came up with a very 'hacky' way to add an icon inside my input box. However no matter what the width of the input box, a portion of the value in the input box is cutt off. I have no idea what could be causing this.

My code:

<div class="pull-right">
<div id="date_range" class="form-control" style="background: #fff; cursor: pointer; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <b class="caret"></b><input name="daterange" style="border: none">
</div>
</div>


image

I tried increasing the width of the div my adding:

<div class="pull-right" style="width: 300px">


It increases the width of the div but the value is still cutt off:

new

Answer

You have to increase the width of the input not the div.

Try:

<input name="daterange" style="border: none;width: 95%;">

Let me know if it helped

Comments