Topic: Modal does not scroll vertically on iphone.
depicturevis
pro asked 10 years ago
<!-- MODAL -->
<button type="button" class="btn btn-primary bth-width1" data-toggle="modal" data-target="#basic1">
<!-- Title -->
Минимальное количество баллов
<!-- /Title -->
</button>
<div class="modal fade" id="basic1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">
<!-- Title -->
Минимальное количество баллов
<!-- /Title -->
</h4>
</div>
<div class="modal-body">
<!-- CONTENT -->
<h3><a name="min"></a>Минимальное количество баллов для каждого вступительного испытания по каждому конкурсу</h3>
<p>
</p>
<p>
1. Минимальное количество баллов единого государственного экзамена, подтверждающее успешное прохождение вступительных испытаний в Университет по предметам, входящим в перечень вступительных испытаний по каждой основной образовательной программе высшего образования в 2017 году:
</p>
<table cellspacing="0" cellpadding="7" border="1">
<colgroup><col> <col> </colgroup>
<tbody>
<tr>
<td>
<p align="CENTER">
Наименование предмета вступительного испытания
</p>
</td>
<td>
<p align="CENTER">
Минимальное
</p>
<p align="CENTER">
количество баллов
</p>
</td>
</tr>
<tr>
<td>
<p>
Иностранный язык
</p>
</td>
<td>
<p align="CENTER">
22
</p>
</td>
</tr>
<tr>
<td>
<p>
Русский язык
</p>
</td>
<td>
<p align="CENTER">
36
</p>
</td>
</tr>
<tr>
<td>
<p>
Информатика и информационно-коммуникационные технологии (ИКТ)
</p>
</td>
<td>
<p align="CENTER">
40
</p>
</td>
</tr>
<tr>
<td>
<p>
Математика профильного уровня
</p>
</td>
<td>
<p align="CENTER">
27
</p>
</td>
</tr>
<tr>
<td>
<p>
Обществознание
</p>
</td>
<td>
<p align="CENTER">
42
</p>
</td>
</tr>
<tr>
<td>
<p>
История
</p>
</td>
<td>
<p align="CENTER">
32
</p>
</td>
</tr>
<tr>
<td>
<p>
Биология
</p>
</td>
<td>
<p align="CENTER">
36
</p>
</td>
</tr>
</tbody>
</table>
<!-- /CONTENT -->
</div>
</div>
</div>
</div>
<!-- /MODAL -->
Marta Szymanska
answered 10 years ago
depicturevis
pro answered 10 years ago
Marta Szymanska
answered 10 years ago
// Position & Size
.modal {
.modal-dialog {
@media (min-width: 768px) {
&.modal-top {
top: 0;
}
&.modal-left {
left: 0;
}
&.modal-right {
right: 0;
}
&.modal-bottom {
bottom: 0;
}
&.modal-top-left {
top: $modal-distance;
left: $modal-distance;
}
&.modal-top-right {
top: $modal-distance;
right: $modal-distance;
}
&.modal-bottom-left {
left: $modal-distance;
bottom: $modal-distance;
}
&.modal-bottom-right {
right: $modal-distance;
bottom: $modal-distance;
}
}
}
And then on small devices mdb modals will behave like basic bootstrap modals.
Best,
Marta
depicturevis
pro answered 10 years ago
Marta Szymanska
answered 10 years ago
@media (min-width: 768px) {
.modal .modal-dialog.modal-top {
top: 0; }
.modal .modal-dialog.modal-left {
left: 0; }
.modal .modal-dialog.modal-right {
right: 0; }
.modal .modal-dialog.modal-bottom {
bottom: 0; }
.modal .modal-dialog.modal-top-left {
top: 10px;
left: 10px; }
.modal .modal-dialog.modal-top-right {
top: 10px;
right: 10px; }
.modal .modal-dialog.modal-bottom-left {
left: 10px;
bottom: 10px; }
.modal .modal-dialog.modal-bottom-right {
right: 10px;
bottom: 10px; } }
You can replace existing code in mdb.css with this one above and it should works.
Best,
Marta
depicturevis
pro answered 10 years ago
Marta Szymanska
answered 10 years ago

Best,
Marta
depicturevis
pro answered 10 years ago
@media only screen and (max-width: 480px) {
.modal .modal-body {
max-height: 420px;
overflow-y: auto;
}
}
Now there is both the vertical and horizontal scroll on mobile, no matter what kind of content is put into the modal. I think the problem was the lack of max-height property, which caused the scroll to be bugged in some way.
Thanks.
Regards,
Kristian
Marta Szymanska
answered 10 years ago
rowanms
answered 7 years ago
Much smoother solution
@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ body { width: 100%; max-width: 100%; will-change: position; }
body.modal-open {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal {
will-change: display;
}
.modal-dialog {
will-change: transform;
}
.modal-body {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
from http://holdencreative.com/fixing-bootstraps-known-issue-with-ios-background-scrolling/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No