User tests: Successful: Unsuccessful:
Fix scrolling inside bootstrap modals (small height of window viewport: mobile, window resized...).
Corrects the media modal padding on small devices.
Patch for Isis and Protostar templates.
Isis template
In admin test new bootstrap modals introduced in 3.5.0 beta2 :
Protostar template
In frontend :
We should be able to scroll inside the modal, and use all options when using administration on a mobile or small screen device.
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
Modal off screen. Not possible to scroll.
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)
Apply the patch, and you may be able to scroll inside all bootstrap modals.
AFTER PATCH on iPhone 4S iOS 9.2.1
Modal adapts to screen. Scroll is working.
Note: Review of the comments by a native English speaker will be appreciated ;-)
Status | New | ⇒ | Pending |
Labels |
Added:
?
|
I have tested this item successfully on 91f2c71
Status | Pending | ⇒ | Ready to Commit |
RTC - thanks
Labels |
Added:
?
|
Thanks @dgt41 and @rehrumesh for testing!
@brianteeman hope my English not too bad in the layout modal main file ;)
Milestone |
Added: |
Status | Ready to Commit | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-02-18 08:36:58 |
Closed_By | ⇒ | Kubik-Rubik |
Labels |
Removed:
?
|
I have tested this item successfully on 91f2c71
@rehrumesh thanks for your tests but you are testing issues that have already been merged
@brianteeman earlier I hadn't use the JTracker application. So marked it again using JTracker.
Sorry to resurrect this already merged PR, but I think what has been done here is really wrong:
You can't fix a Bootstrap modal problem by hacking the content of the modal. That could work today for today backend content but has the potential of breaking frontend usage of the Bootstrap modals or tomorrow usage in the backend with different header/footer sizes.
A correct approach would had been to correct the issue at the modal
(container) itself, and absolutely not by imposing restrictions on the .modal-body
based on specific assumptions about the header, footer and padding size.
This had probably meant to correct the Bootstrap modal JS itself, but that would had been the only correct solution.
OMG, now I see this is a specific Webkit issue, and there are correct solutions here: twbs/bootstrap#14839
I think we can't cut corners to badly fix specific iOS issues, especially if correct solutions are already available.
works for me! Thanks @JoomliC