0

Как в Бутстрапе можно задать свои размеры модального окна и растянуть элемент на всё его тело? Допустим, textarea на всю ширину и высоту modal-body.

textarea {
    width:100%;
    height:100%;
}
.modal-custom {
    width: 70%;
    height: 70%;
    padding: 0;
}
.modal-content-custom {
    height: auto;
    min-height: 100%;
}

Это работает некорректно. Само окно растягивается, но modal-body занимает минимальную высоту. Высота textarea не изменяется. Что тут можно придумать?

<div class="modal fade editForm" id="editForm" tabindex="-1" role="dialog" aria-labelledby="editFormLabel">
    <div class="modal-dialog modal-custom" role="document">
        <div class="modal-content modal-content-custom">
            <div class="modal-header">
                <h4 class="modal-title" style="display: inline-block" id="editFormLabel">Source code</h4>
            </div>
            <div class="modal-body">
                <textarea id="textpage" class="edtextarea" title="Source code of page"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

https://pastebin.com/tWjDv08T

1 ответ 1

0

Типа такого надо ?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    textarea {
      width:100%;
      height:100%;
    }
    .modal-custom {
      width: 70%;
      height: 70%;
      padding: 0;
    }
    .modal-content-custom {
      height: 100%;
      min-height: 100%;
      border-radius: 0;
    }
    .modal-body {
      height: 70%;
    }
  </style>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#editForm">
  Launch demo modal
</button>


<div class="modal fade editForm" id="editForm" tabindex="-1" role="dialog" aria-labelledby="editFormLabel">
  <div class="modal-dialog modal-custom" role="document">
    <div class="modal-content modal-content-custom">
      <div class="modal-header">
        <h4 class="modal-title" style="display: inline-block" id="editFormLabel">Source code</h4>
      </div>
      <div class="modal-body">
        <textarea id="textpage" class="edtextarea" title="Source code of page"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.