Странная проблема с элементом ввода

Question

Итак, я придумал очень «взломанный» способ добавить значок в поле ввода. Однако независимо от ширины окна ввода часть значения в поле ввода отключается. Я понятия не имею, что может быть причиной этого.

Мой код:

<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> 

Я попытался увеличения ширины DIV мой добавления:

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

Это увеличивает ширину DIV, но значение по-прежнему Cutt off:

Answer 1

Вы должны увеличить ширину входа, а не div.

Try:

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

Позвольте мне знать, если это помогло

Answer 2

border:none и width: 100% они оба не заканчиваются ;, это может вызвать проблемы, с которыми вы столкнулись. однако я не проверял, не так ли.

Попробуйте это;

<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; width:100%;"> 
    </div> 
</div> 

Answer 3

Лучший способ сделать это в загрузчике, чтобы использовать вход-группу

<div class="input-group"> 
     <div class="input-group-addon"> 
      <span class="fa fa-calendar"></span> 
      <b class="caret"></b> 
     </div> 
     <input type="text" name="daterange" class="form-control" /> 
    </div> 

Answer 4

Проблема, кажется, что ваше поле ввода имеет фиксированную ширину. Дайте ему минимальную ширину, например, 170 пикселей или некоторую аналогичную ширину. Также проверьте прокладку справа на элемент контейнера.

Вот скрипка. https://jsfiddle.net/zjxborpt/

HTML

<div class="pull-right"> 
    <div id="date_range" class="form-control"> 
     <i class="fa fa-calendar">ICON</i>&nbsp; 
     <span></span> <b class="caret">^</b><input type="daterange" name="daterange" class="form-control" style="border: none" value="2016-02-25 - 2016-03-07"> 
    </div> 
</div> 

CSS

#date_range { 
    background: #fff; 
    cursor: pointer; 
    border: 1px solid #ccc; 
    padding: 10px; 
    display: inline-block; 
} 
#date_range i { width: 40px; display: inline-block; } 
#date_range .caret { width: 10px; 
    display: inline-block; 
    transform: rotate(180deg); 
    margin-right: 10px; 
    position: relative; 
    top: -5px; 
} 

#date_range input { min-width: 170px; display: inline-block; }