Здравствуйте! Помогите пожалуйста решить проблему.
У меня есть модальное окно с формой редактирования. Данные в форму загружаю через AJAX. Использую
bootstrap 3.3.7. В форме есть две вкладки (tabs). В каждой вкладке есть элемент
<textarea> к которой применил плагин
autosize.
Проблема в следующем. Когда открываю модальное окно с формой редактирования в textarea находится длинный текст, но textarea не приминаем нужную высоту. Необходимо что либо вводить, лишь тогда плагин зарабатывает. Как исправить данную проблему? Хочу узнать ваши мнения по этому поводу.
Код выложил в
jsfiddle.net.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="dashboard-wrapper">
<div id="dashboard-content">
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form method="post" action="">
<div class="modal-body">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a class="tabnav" data-toggle="tab" href="#TabFirst">FIRST</a></li>
<li><a class="tabnav" data-toggle="tab" href="#TabSecond">SECOND</a></li>
</ul>
<div class="tab-content">
<div id="TabFisrt" class="tab-pane fade in active">
<div class="form-group">
<label for="first_body">First Description</label>
<div class="textarea-wrapper">
<textarea name="body" class="form-control" id="first_body"></textarea>
<i class="fa fa-arrows textarea-icon" aria-hidden="true"></i>
</div>
</div>
</div>
<div id="TabSecond" class="tab-pane fade in active">
<div class="form-group">
<label for="second_body">Second Description</label>
<div class="textarea-wrapper">
<textarea name="body" class="form-control" id="second_body"></textarea>
<i class="fa fa-arrows textarea-icon" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.0/autosize.js"></script>
</body>
</html>
JS:
autosize(document.querySelectorAll('#first_body'));
autosize(document.querySelectorAll('#second_body'));
