I use bootstrap3 and third-party autosize textarea by Jack Moore library.

I have a modal window in which the textarea is located and this textarea when opening a modal window is not adapted to the size of the text in it. Why is this happening and how to fix it?

 <!DOCTYPE html> <html lang="ru"> <head> <!-- <script src="https://github.com/jackmoore/autosize/blob/master/dist/autosize.js"></script>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" /> <script src="https://raw.githubusercontent.com/jackmoore/autosize/master/dist/autosize.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <table class="table table-bordered"> <tbody> <tr> <td width="40%"> <label class="left-cell">Наименование, здания (сооружения) в соответствии с проектной документацией, адрес объекта</label> </td> <td width="60%"> <textarea class="form-control readonly" asp-for="@Model.EtpDocTitleP1s.Value" readonly id="TitleP1">Этот textarea растягивается сразу при загрузке страницы.</textarea> </td> </tr> </tbody> </table> <!--Модальнео окно--> <div id="mTitleP1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <form asp-action="SetTitleP1" asp-controller="ETP"> <input type="hidden" asp-for="@Model.EtpDocTitleP1s.EtpDocTitleP1id" /> <input type="hidden" asp-for="@Model.EtpDocTitleP1s.EtpMainId" /> <table class="table table-bordered"> <tbody> <tr> <td width="40%"> <label class="left-cell">Наименование, здания (сооружения) в соответствии с проектной документацией, адрес объекта</label> </td> <td width="60%"> <textarea class="form-control" id="mta">А этот textarea растягивается, только если в него что-то ввести.</textarea> </td> </tr> </tbody> </table> <div class="modal-footer"> <input type="submit" value="Сохранить изменения" class="btn btn-primary" /> </div> </form> </div> </div> </div> </div> <style> textarea { overflow: hidden; /*прокрутка*/ resize: none; /*угололк*/ -ms-overflow-style: none; /*для IE прокрутка*/ } textarea.readonly { cursor: pointer; } </style> <!--autosize-textarea--> <script> autosize(document.querySelectorAll('textarea')); </script> <!--вызов модального окна--> <script> $('#TitleP1').click(function() { $('#mTitleP1').modal('show'); }); </script> </body>

enter image description here enter image description here

    1 answer 1

    Connect normally script autosize.js
    https://raw.githubusercontent.com/jackmoore/autosize/master/dist/autosize.js

    • one
      It is not the answer to the question. To leave your comments or ask the author to clarify, leave a comment to the appropriate post. - From the queue of checks - Sergey Glazirin
    • @SergeyGlazirin is exactly the answer to the question “why doesn’t it work?” And not to make clarifications. I would advise you to start, before stating, to test this code, follow the script connection links, etc. - Andrey ProjectSoft