Изменить размер сгруппированных кнопок на размер области текста?

Question

Я создаю интерфейс, где мне нужно иметь следующую настройку: button - textarea - button.

Используя входные группы, кнопки не масштабируются, чтобы соответствовать высоте текстового поля (как они делают с «нормальными» образуют входы)

Вот Fiddle

Идеальная разметка:

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn">        
      <span class="glyphicon glyphicon-eye-open"></span> 
     </button> 
    </span> 
    <textarea class="form-control" rows="3"></textarea> 
    <span class="input-group-btn"> 
     <button class="btn btn-danger">        
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 
</div> 

Пол-рабочая разметка (выглядит плохо, кнопки маленькие и окружено серым):

<div class="input-group"> 
    <span class="input-group-addon"> 
     <button class="btn">        
      <span class="glyphicon glyphicon-eye-open"></span> 
     </button> 
    </span> 
    <textarea class="form-control" rows="3"></textarea> 
    <span class="input-group-addon"> 
     <button class="btn btn-danger">        
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 
</div> 

Как вы можете видеть, кнопки остаются маленькими и не соответствуют высоте текстового поля.

Если вы заменили текстовое поле с вводом текста, кнопки матч (как показано в BS3 документации)

Теперь, используя «вход-группу-аддон» делает на которые начинаются и прилагаемые элементы совпадают, но тогда они не станут кнопками. Вставка кнопки внутри тега «вход-группа-аддон» выглядит ужасно.

Итак, есть ли способ получить кнопки в соответствии с высотой текстового поля?

Answer 1

Это одно решение, которое может сработать для вас. Я думаю, проблема заключается в том, что это специальные значки шрифтов, вставленные с классом :before. Таким образом, они не будут реагировать на height вам нужно их размер с font-size:

Working Demo

Единственная проблема, которую я вижу в том, что вы собираетесь иметь жестко закодировать их правильно выравнивать с ваш ящик ввода (я использовал их не по назначению). Я добавил несколько классов, чтобы упростить задачу и не перезаписывать bootstrap css.

HTML:

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button class="btn">        
     <span class="glyphicon glyphicon-eye-open custom-eye"></span> 
     </button> 
    </span> 
    <textarea class="form-control custom-control" rows="3"></textarea> 
    <span class="input-group-btn"> 
     <button class="btn btn-danger">        
     <span class="glyphicon glyphicon-remove custom-remove"></span> 
     </button> 
    </span> 
    </div> 

CSS:

.custom-control {height: 5.25em} 

.custom-eye {font-size: 4em;} 

.custom-remove {font-size: 4em;} 

Answer 2

Я надеюсь, что этот пример может помочь:

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 
 
.input-arreglo-group{ 
 
    padding: 0px 0px; 
 
} 
 
.input-arreglo{ 
 
    margin-top: 0px; 
 
    height: calc(100% + 15px); 
 
    border-top-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
}

<div class="form-group"> 
 
    <label for="proyecto_descripcion">Descripción</label> 
 
    <div class="input-group"> 
 
     <textarea class="form-control" style="resize:vertical;" rows="7" id="proyecto_descripcion" name="proyecto_descripcion" placeholder="Descripción del Proyecto"></textarea> 
 
     <div class="input-group-addon input-arreglo-group"> 
 
      <button class="btn btn-danger input-arreglo"> 
 
       <span class="glyphicon glyphicon-remove"></span> 
 
      </button> 
 
     </div> 
 
    </div> 
 
</div>

Al кулачок biar el tamaño de textarea el кнопка se адаптация al tamaño.