? ? Success

User tests: Successful: Unsuccessful:

avatar JoomliC
JoomliC
16 Feb 2016

Fix scrolling inside bootstrap modals (small height of window viewport: mobile, window resized...).
Corrects the media modal padding on small devices.

Steps to reproduce the issue

Isis template
In admin test new bootstrap modals introduced in 3.5.0 beta2 :

  • Add New Menu Item : Menu Item Type (component views) or Link Image (image) option
  • Add New Article : Created By (users), Intro Image (image)
  • In list of items : test Batch modals
  • Everywhere a bootstrap modal is used...

Protostar template
In frontend :

  • Edit Article : Versions, Intro Image (image) ...
  • Everywhere a bootstrap modal is used...

Expected result

We should be able to scroll inside the modal, and use all options when using administration on a mobile or small screen device.

Actual result in 3.5.0 beta2

You may not be able to scroll the modal on iOS (iPhone) (tests on other mobile OS are welcome!)
On window resized (small height), modal could be off screen (bottom content not accessible)

BEFORE PATCH on iPhone 4S iOS 9.2.1
iphone4s-before-patch
Modal off screen. Not possible to scroll.

Additional comments

Scrolling not working on mobile is a known issue of Bootstrap modals, not fixed in BS 2 and 3 : twbs/bootstrap#14839 (and maybe related to a webkit bug: https://bugs.webkit.org/show_bug.cgi?id=153856)
To set a max-height for modal-body class depending on the current viewport height solves the issue of not being able to view bottom of the modal window. (resize your window to arround 300px height before and after patch)

Testing

Apply the patch, and you may be able to scroll inside all bootstrap modals.

AFTER PATCH on iPhone 4S iOS 9.2.1
iphone4s-after-patch
Modal adapts to screen. Scroll is working.

Note: Review of the comments by a native English speaker will be appreciated ;-)

avatar JoomliC JoomliC - open - 16 Feb 2016
avatar JoomliC JoomliC - change - 16 Feb 2016
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 16 Feb 2016
Labels Added: ?
avatar JoomliC
JoomliC - comment - 16 Feb 2016

Thanks to first feedback from @dgt41 ( :+1: ) i will update tomorrow this PR with protostar css fix, and more testing instruction with screen shots before/after patch.

avatar JoomliC JoomliC - change - 16 Feb 2016
Title
[BUG 3.5.0 beta] Fix iOS scrolling inside bootstrap modals
[BUG 3.5.0 beta] Fix scrolling inside bootstrap modals (small height of window viewport)
avatar JoomliC
JoomliC - comment - 17 Feb 2016

PR now updated for Protostar, and ready for testing! ;-)

avatar joomla-cms-bot joomla-cms-bot - change - 17 Feb 2016
Labels Added: ?
avatar JoomliC
JoomliC - comment - 17 Feb 2016

Closed this PR for another one, with no conflict with the base branch : #9140

avatar JoomliC JoomliC - change - 17 Feb 2016
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2016-02-17 14:27:51
Closed_By JoomliC
avatar JoomliC JoomliC - close - 17 Feb 2016
avatar JoomliC JoomliC - change - 17 Feb 2016
Title
[BUG 3.5.0 beta] Fix scrolling inside bootstrap modals (small height of window viewport)
[BUG 3.5.0 beta] Fix scrolling inside bootstrap modals (See New PR #9140)

Add a Comment

Login with GitHub to post a comment