Bootstrap 3 - текстовая область не редактируется на экране мобильного устройства (но редактируется на других экранах)

Question

При использовании текстовых областей в моем приложении текстовые области становятся «недоступными для редактирования» на экранах мобильных устройств.На других размерах экрана проблем нет.Поля ввода (текст) работают нормально на мобильных телефонах.

Почему текстовое поле не доступно для редактирования на мобильных телефонах?Как я могу сделать это снова редактируемым?

<div class="row">
  <div class="col-sm-12">
    <form #f="ngForm">
      <div class="form-group">
        <div class="row">
          <div class="col-sm-3"><label for="gcid">GcId</label></div>
          <!-- <div class="col-xs-9"><input type="text" id="gcid" name="gcid" [(ngModel)]="gcid" #gcid="ngModel" class="form-control"></div> -->
          <div class="col-sm-9 col-xs-10">
            <input type="text" id="gcid" name="gcid" [(ngModel)]="gcid" required class="form-control" #v_gcid="ngModel">
            <span *ngIf="!v_gcid.valid && v_gcid.touched" class="text-danger">GC mag niet leeg zijn. Vul een geldige GC code in. </span>
          </div>
          <div class="clearfix visible-sm-block"></div>
        </div>
      </div>   
      ...     
      <div class="form-group col-xs-11">
        <div class="row">
        <label for="description">Description</label>
        <textarea rows="3" id="description" name="description" [(ngModel)]="description" class="form-control"></textarea>
        </div>
      </div>
      <div class="form-group col-xs-11">
        <div class="row">
        <label for="hint">Hint</label>
        <textarea rows="4" id="hint" name="hint" [(ngModel)]="hint" class="form-control"></textarea>
        </div>
      </div>

Answer 1

Я думаю, что это, скорее всего, связано с тем фактом, что ваш элемент <div class="row">, содержащий textarea, не имеет правильного вложения строки / столбца / группы.Попробуйте реструктурировать HTML, как это, и посмотрите, поможет ли это причиной.

<div class="row">
    <div class="col-xs-11">
        <div class="form-group">
            <label for="description">Description</label>
            <textarea rows="3" id="description" name="description" [(ngModel)]="description" class="form-control"></textarea>
        </div>  
    </div>
</div>

Как упоминалось в моем комментарии, эта статья дала мне идею: Bootstrap 3 входа только для чтения в режиме рабочего стола, но нена небольших устройствах .

Вы также можете попробовать добавить атрибут contenteditable="true" к textarea, чтобы проверить, работает ли он.Это не должно понадобиться, но может помочь заставить мобильный экран делать то, что нужно.