I'm encountering a strange issue while attempting to inject text from the database into an HTML template using AngularJS. Everything appears fine until switching to mobile view or when the screen size is very small.
Here is my HTML template:
<div class="col-12">
<div class="panel panel-white no-radius">
<div class="panel-heading border-bottom">
<h4 class="panel-title">Review</h4>
</div>
<div class="panel-body padding-left-20 padding-right-20">
<div ng-repeat="reviewer in reviewers">
<div class="row">
<a href="#" class="pull-left"> <img alt="image" class="img-circle" src="assets/images/avatar-2.jpg"> </a>
<strong>{{reviewer.FirstName}} {{reviewer.LastName}}</strong>
</div>
<div class="row">
<div class="well" style="height: 100px; overflow:auto; word-wrap:break-word;" >
{{reviewer.Review}}
</div>
</div>
</div>
</div>
<div class="panel-footer" ng-if='rate'>
Please leave <strong>{{name}}</strong> a review:
<textarea class="form-control" ng-model='review' maxlength="900" style="resize:vertical;" rows="3"></textarea>
<button ng-if='rate' class="btn btn-primary btn-xs margin-top-3" ng-click="leaveReview(review)">Leave review</button>
</div>
</div>
The textarea on the footer is where I input the review into the database. What I've noticed is that if I simply insert text into the HTML file, the layout looks perfect. However, when utilizing ngBind, the text causes the div to widen on smaller screens (specifically, when resizing).
My assumption is that the textarea adds hidden characters to the input, which then interfere with the div (possibly newlines or something similar).
Apologies if the HTML indentation isn't correct.