Я видел несколько решений по SO и несколько блогов о том, как сделать тело модальной Bootstrap прокручиваемым.Проблема состоит в том, что эти решения требуют, чтобы модальный заголовок был фиксированной высоты.
В моем случае у меня есть текст, который отображается в модальном заголовке и изменяется по длине в зависимости от того, что пользователь нажимает.Я не могу использовать фиксированную высоту заголовка, потому что мне нужно, чтобы заголовок реагировал на текст.
По сути, я хочу, чтобы модальный заголовок мог занимать столько места, сколько ему нужно, и модальную высоту тела.соответственно уменьшится, так что весь модальный диалог уместится на экране.
Есть ли способ предварительно вычислить высоту модального заголовка до того, как отобразит его?Если бы я мог это сделать, то я мог бы просто использовать jQuery, чтобы соответствующим образом изменить высоту модального тела.
В качестве альтернативы, есть ли решение CSS для этой проблемы?
Ниже мой HTML:
<!-- Modal -->
<div class="modal fade" id="abstract-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-lg" id="abstract-modal-dialog" role="document">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header stylish-color" id="modal-header">
<!-- Modal Title -->
<h4 id="modal-title" class="modal-title white-text font-weight-bold py-1"></h4>
<!-- Modal Colour -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!-- Modal Body -->
<div class="modal-body" id="modal-body">
<!-- Publisher -->
<div class="row" style="padding-bottom: 10px;">
<div class="col flush-labels">
<h5><span id="modal-publisher" class="badge orange"></span></h5>
</div>
<!-- Date Published -->
<div class="col flush-labels no-left-padding">
<h5><span id="modal-published-date" class="badge stylish-color"></span></h5>
</div>
</div>
<!-- Authors Name -->
<h5>Authors</h5>
<p id="modal-authors"></p>
<h5>Abstract</h5>
<!-- Abstract -->
<p id="modal-abstract"></p>
</div>
<!-- Modal Footer -->
<div class="modal-footer flex-center" id="modal-footer">
<!-- Publisher Link Out Button -->
<a id="modal-publisher-link-out" href="#" target="_blank">
<button type="button" class="btn stylish-color">Publisher's Site<i class="fas fa-external-link-alt ml-2"></i></button>
</a>
<!-- Add to Search Button -->
<button id="add-to-refine-button" type="button" class="btn peach-gradient" data-dismiss="modal">
Add to search<i class='fas fa-plus-square ml-2'></i>
</button>
</div>
</div>
</div>
</div>
И мой CSS:
.modal {
/* Enable smooth-scrolling on iOS */
-webkit-overflow-scrolling: touch;
}
.modal .modal-content {
overflow: hidden;
}
.modal-content {
height: 100%;
}
.modal-header {
/* can't have a fixed height here */
}
.modal-body {
/* how to set modal-body height? */
overflow-y: scroll;
}
Любая помощь здесь приветствуется!