Modal does not scroll vertically on iphone.

Topic: Modal does not scroll vertically on iphone.

depicturevis pro asked 7 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 -->

Add comment

rowanms free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 Wierzbicka staff commented 5 years ago

Hi,

thank you for sharing your solution.

Best, Marta

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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

Add comment

depicturevis pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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

Best, Marta

Add comment

depicturevis pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

depicturevis pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi,

you can add media query to _modals.scss file like here:
<pre><code>// 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;
            }
        }
    }</code></pre>

And then on small devices mdb modals will behave like basic bootstrap modals.

Best,
Marta

Please insert min. 20 characters.

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

Add comment

depicturevis pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

depicturevis

Pro User 10Support score
7Questions 7Answers 0Snippets