CODEWITHSUNDEEP
twitter-bootstrap-3
tm1701
tm1701

Reputation: 7591

Bootstrap 3 - textarea is not editable on mobile screen (but editable on other screens)

When using textareas in my application, the textarea become 'not editable' on mobile screens. On other screen sizes there are no problems. The input (text) fields are working fine on mobiles.

Why is the textarea not editable on mobiles? How can I make it editable again? 

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

Upvotes: 1

Views: 919

Answers (1)

cfnerd
cfnerd

Reputation: 3799

I think it likely has something to do with the fact that your <div class="row"> element that contains the textarea doesn't have the proper row/column/group nesting. Try restructuring the HTML like this and see if that helps the cause.

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

As mentioned in my comment, this article gave me the idea: Bootstrap 3 inputs read-only in desktop mode but not on small devices.

You could also try adding the contenteditable="true" attribute to the textarea to see if that works. It shouldn't need it, but might help force the mobile screen to do what is needed.

Upvotes: 1

Related Questions