Modal does not scroll vertically on iphone.


Topic: Modal does not scroll vertically on iphone.

depicturevis pro asked 8 years ago

I have a modal implemented, which contains a table inside it. There is a horizontal and vertical scroll added automatically if the table is too wide, so that the user can view it. The problem I am having is that when user presses down on the table to scroll, it only allows the user to scroll horizontally. And when attempting to scroll vertically, it scrolls the background below the modal instead of the modal. Is there a way to fix this? This is an example below. I am not adding the whole table, because that would not fit well at all in this post.
<!-- 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">&times;</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

Hi, we know this issue and we'll fix this in next release MDB 4.4.0, what should be quite soon. Best, Marta

depicturevis pro answered 8 years ago

Hi Marta, Thank you for your reply. Is there a workaround of any sort? Regards, Kristian

Marta Szymanska staff pro premium answered 8 years ago

Hi, you can add media query to _modals.scss file like here:
// 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

Hi, Thank you for your prompt reply. Is there a viable css solution? I am not using scss and when I tried to compile it to css it does not function at all. Regards, Kristian

Marta Szymanska staff pro premium answered 8 years ago

Hi Kristian, so maybe this CSS code will work:
@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

Hi Marta, Thank you for your help. I did as you instructed. However, on modals with tables inside them its still not possible to scroll vertically. Only horizontally. There is a small area on the left of the modal which I assume is just padding which allows to scroll vertically though. Not sure if this is clear enough of an explanation. The tables still seem to override the yscroll for some reazon. Regards, Kristian

Marta Szymanska staff pro premium answered 8 years ago

Hi, When I turn your modal on my iPhone it looks fine and it scrolls vertically, so I'm not sure what is wrong.onetwo Best, Marta

depicturevis pro answered 8 years ago

Apparently this is a recurring problem with the bootstrap modal. I have managed to fix the problem on mobile by adding the following code:

@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

Hi, I'm glad you fixed this problem, thank you for notice this. Best, Marta

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No