bootstrap 2 input-append add-on

Question

Я использую надстройку ввода-добавления для загрузки, чтобы добавить значок в конец поля ввода. Все это прекрасно работает. Проблема заключается в установке ширины 100% на входе, толкает надстрочный тег span вне родительской области «ввод-обертка». Я использую размер коробки: border-box; по всем полям ввода. единственный способ заставить эту работу установить родительский div «input-wrapper» для отображения: flex; К сожалению, это не вариант, поскольку он не поддерживается в IE8 или 9. Какие другие варианты у меня есть.

http://jsfiddle.net/chapster11/zjx2zc6e/

Пример кода.

 <div id="form-elements"> 
     <div class="input-wrapper input-append"> 
      <input id="paymentDate" class='paymentDate' type="text" /> 
      <span class="add-on"><i class="icon-th"></i></span> 
     </div> 
    </div> 

CSS КОД

#form-elements{ 
     margin: 20px; 
    } 

    input[type]{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    max-height: 30px; 
    } 

    #paymentDate{ 
    height: 30px; 
    width: 100%; 
    } 

    .input-wrapper{ 
     width: 600px; 
     border: 1px dashed red; 
    } 

Answer 1

Редактировать: Мой плохой, на Bootstrap2 возникла проблема с функцией «уровень входного блока», работающей с аддонами (она работает для всех других входов). Несколько человек придумали некоторые обходные пути, в основном используя табличный дисплей. Вы можете посмотреть здесь: https://jsfiddle.net/BMironov/BVmUL/

Вот CSS, который его обрабатывает - вы можете поиграть с тем, как работает надстройка.

.input-append.input-block-level { 
    display: table; 
} 
.input-append.input-block-level .add-on { 
    display: table-cell; 
    width: 16px; 
} 
.input-append.input-block-level > input { 
    box-sizing: border-box; 
    display: table; 
    min-height: inherit; 
    width: 100%; 
} 

.input-append.input-block-level > input { 
    border-right: 0; 
} 

Вместо того чтобы устанавливать входной сигнал на ширину 100%, добавить класс input-block-level к вводу текста. Вам не нужен дополнительный CSS, эта функциональность встроена в Bootstrap 2.

Answer 2

Очевидно, что если один из вашего вложенного элемента input устанавливается с шириной 100%, ваш другой вложенный элемент span выйдет за пределы оболочки, что общая ширина в настоящее время занято по input.