Topic: Modal does not scroll vertically on iphone.
depicturevis pro asked 8 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 staff pro premium answered 8 years ago
depicturevis pro answered 8 years ago
Marta Szymanska staff pro premium answered 8 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 8 years ago
Marta Szymanska staff pro premium answered 8 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 8 years ago
Marta Szymanska staff pro premium answered 8 years ago
depicturevis pro answered 8 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 staff pro premium answered 8 years ago
rowanms answered 5 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/
Marta Szymanska staff pro premium commented 5 years ago
Hi,
thank you for sharing your solution.
Best, Marta
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