Position the main form actions to the bottom of IFrame

Here is a first patch, explanation with screenshots is coming soon.

Some explanation for this. Basically, we want to position form actions on the bottom of the IFrame and make them always visible. We think this will improve UX of EB IFrame a bit.

Here are a couple of screenshots. Do not that, beside patch from this issue, I used the latest patches from the next issues to create these screenshots: #2845941: Enable view to select just a single entry, #2993139: Improve height calculation for responsive entity browser modal, #3055358: Entity Browser iFrame 100% height can cause vertical scrollbar, #3055370: Entity Browser fluidModal behaviour runs always increasing the multiple fluidDialog calls, #3025100: Option for iFrame to automatically calculate height and #3055838: Improve calculation of modal height for iOS. This all patches are applied to 2.1 stable version. And for sure a bit of custom CSS for styling is added for custom look.

Inline IFrame:

Modal dialog IFrame:

We will test this now a bit more on various client sites and update here if we find any problems.

One additional reason for proposing this improvement in EB and not just doing it in custom code is that it is a bit difficult to inject scrolling=no attribute to EB IFrame and we need this because of iOS IFrame height problems as explained in https://stackoverflow.com/a/34320508.

Found out that iOS browser is really weird. It seems it will not show scrollbars on overflow elements so we need to enable this manually. More about this on https://stackoverflow.com/questions/3512885/how-do-i-get-scrollbars-to-s....

Here is a new patch that is trying to improve this.

Did some more digging and testing. Added a media query to apply this only for touch devices for now.

Also found out a very recent fix for webkit https://bugs.webkit.org/show_bug.cgi?id=158342 that will maybe make this problem much easier to solve with just applying -webkit-overflow-scrolling:touch to form element.

Very not happy how iOS is handling this and adding various changes that make stuff works a bit different than other browsers :(

Here is a screenshot of iPhone 6 simulator, seems it is working fine but the scrollbar will be always visible for now:

While testing iOS we figure it out that it is quite annoying that when you scroll to the bottom or top of the modal and then try to scroll more will trigger scrolling on parent body which will result in moving of the modal dialog. This is very bad for UX.

An easy fix for this is to apply position fixed to modal ui-dialog wrapper. User will still be able to scroll parent page but dialog will not move any more.

And sure enough, this problem does not happen on Android Chrome.