diff --git a/skins/elastic/README.md b/skins/elastic/README.md
index 58f16c9ed..94761759b 100644
--- a/skins/elastic/README.md
+++ b/skins/elastic/README.md
@@ -57,7 +57,7 @@ destination system.
RULES:
------
- Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari,
- Android Browser 5+, iOS Safari 7+.
+ Android Browser 5+, iOS Safari 9+.
- Minimum supported screen width is 240px (note that even if the device screen
resolution is e.g.320x372 changing the text size in device settings will reduce
diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index 5c33c7d48..0ed3bd940 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -38,7 +38,6 @@ html {
body {
min-width: @page-min-width;
height: 100%;
- overflow: hidden;
color: @color-font;
}
@@ -65,15 +64,24 @@ body > #layout {
background-color: @color-layout-content-background;
& > .formcontent, // e.g. Help plugin
- & > iframe,
- & > .content,
- & > .content > iframe {
+ & > .content {
height: 100%;
width: 100%;
overflow: auto;
- border: 0;
flex: 1;
}
+
+ .iframe-wrapper {
+ width: 100%;
+ height: 100%;
+ flex: 1;
+
+ iframe {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+ }
}
&.sidebar {
@@ -92,6 +100,9 @@ body > #layout {
&.menu {
width: @layout-menu-width;
+ // FIXME: we set background color here not in taskmenu.less, because
+ // otherwise background is partially white on Android/iOS
+ background-color: @color-taskmenu-background;
}
& > .scroller {
diff --git a/skins/elastic/styles/widgets/common.less b/skins/elastic/styles/widgets/common.less
index ca6fbf449..af579e66e 100644
--- a/skins/elastic/styles/widgets/common.less
+++ b/skins/elastic/styles/widgets/common.less
@@ -240,6 +240,17 @@ fieldset.image-attachment {
bottom: @layout-header-height;
}
+// iOS: Fix scrolling of iframe, display scrollbars on scrollable elements
+.ios-scroll {
+ padding: 0;
+ -webkit-overflow-scrolling: touch !important;
+ overflow: scroll !important;
+
+ &.iframe-wrapper {
+ margin-top: 1px; // FIXME: without this scrolling hides the wrapper neighbours' border
+ }
+}
+
.quota-widget {
width: 5rem;
max-width: 8rem;
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 3e027a02d..e993529a5 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -311,7 +311,6 @@ html.ms .propform {
flex-direction: column;
justify-content:flex-start;
overflow-y: hidden !important;
- height: 100%;
.formcontent {
overflow-x: hidden;
@@ -325,17 +324,28 @@ html.ms .propform {
margin-right: .5rem;
}
}
-}
-html.layout-small,
-html.layout-phone {
- .formcontainer {
+ // FIXME: iOS/Android frames have some problem with form buttons element
+ // when the form height is bigger than the iframe height
+ // We got rid of the floating buttons effect to fix that,
+ // which is not perfect because Save button are visible only after
+ // the page is scrolled to the bottom
+ .webkit.tablet &,
+ .iframe.ipad &,
+ .iframe.iphone & {
+ display: block;
+ }
+
+ // We don't need buttons element on small devices
+ html.layout-small &,
+ html.layout-phone & {
.formbuttons {
display: none;
}
}
}
+
.formcontent {
padding: 1rem;
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index 3a32097f1..2f3f61ce0 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -97,17 +97,18 @@
}
}
}
-}
-.ui-dialog iframe,
-.ui-dialog-content.iframe {
- padding: 0 !important;
- overflow: hidden !important;
- width: 100% !important;
- height: 100%;
- border: 0;
+ iframe,
+ .ui-dialog-content.iframe {
+ padding: 0;
+ width: 100% !important;
+ height: 100%;
+ border: 0;
+ overflow: hidden;
+ }
}
+
/* FIXME: why do I need !important here? */
@media screen and (max-width: @screen-width-xs) {
diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
index 2d42d9f3d..b7f1d9ec2 100644
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ b/skins/elastic/styles/widgets/taskmenu.less
@@ -12,7 +12,6 @@
/*** Taskmenu ***/
#taskmenu {
- background-color: @color-taskmenu-background;
height: 100%;
a {
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
index 8f6efc883..d825598f4 100644
--- a/skins/elastic/templates/addressbook.html
+++ b/skins/elastic/templates/addressbook.html
@@ -84,8 +84,10 @@
-
+
+
+
diff --git a/skins/elastic/templates/contact.html b/skins/elastic/templates/contact.html
index 849a2ec92..f4d4c665f 100644
--- a/skins/elastic/templates/contact.html
+++ b/skins/elastic/templates/contact.html
@@ -19,7 +19,7 @@
-
+
diff --git a/skins/elastic/templates/folders.html b/skins/elastic/templates/folders.html
index 75218b66e..bd8f3a599 100644
--- a/skins/elastic/templates/folders.html
+++ b/skins/elastic/templates/folders.html
@@ -47,7 +47,9 @@
label="empty" title="empty" innerclass="inner" />
-
+
+
+
-
+
+
+
diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html
index 58dcbb7a2..0555739ef 100644
--- a/skins/elastic/templates/mail.html
+++ b/skins/elastic/templates/mail.html
@@ -69,12 +69,14 @@
-
+
+
+
diff --git a/skins/elastic/templates/messagepart.html b/skins/elastic/templates/messagepart.html
index 0bb8410d2..056c85c52 100644
--- a/skins/elastic/templates/messagepart.html
+++ b/skins/elastic/templates/messagepart.html
@@ -53,8 +53,10 @@
-
+
+
+
diff --git a/skins/elastic/templates/responses.html b/skins/elastic/templates/responses.html
index e28b35629..137dcdde1 100644
--- a/skins/elastic/templates/responses.html
+++ b/skins/elastic/templates/responses.html
@@ -35,7 +35,9 @@
class="button delete disabled" classAct="button delete" />
-
+
+
+
diff --git a/skins/elastic/templates/settings.html b/skins/elastic/templates/settings.html
index 7128d23f8..387d5c227 100644
--- a/skins/elastic/templates/settings.html
+++ b/skins/elastic/templates/settings.html
@@ -21,7 +21,9 @@
-
+
+
+
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index d12285f39..637e227af 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -18,6 +18,7 @@ function rcube_elastic_ui()
var ref = this,
mode = 'normal', // one of: large, normal, small, phone
touch = false,
+ ios = false,
is_framed = rcmail.is_framed(),
env = {
config: {
@@ -288,6 +289,10 @@ function rcube_elastic_ui()
// move "Download all attachments" button into a better location
$('#attachment-list + a.zipdownload').appendTo('.header-links');
+
+ if (ios = $('html').is('.ipad,.iphone')) {
+ $('.iframe-wrapper, .scroller').addClass('ios-scroll');
+ }
};
/**
@@ -728,6 +733,10 @@ function rcube_elastic_ui()
// when loading content-frame in small-screen mode display it
layout.content.find('iframe').on('load', function(e) {
var href = '', show = true;
+
+ // Reset the scroll position of the iframe-wrapper
+ $(this).parent('.iframe-wrapper').scrollTop(0);
+
try {
href = e.target.contentWindow.location.href;
show = !href.endsWith(rcmail.env.blankpage);
@@ -1015,6 +1024,16 @@ function rcube_elastic_ui()
}
screen_resize_headers();
+
+ // On iOS and Android the content frame height is never correct, fix it
+ if (bw.webkit) {
+ $('.iframe-wrapper').each(function() {
+ var h = $(this).height();
+ if (h) {
+ $(this).children('iframe').height(h);
+ }
+ });
+ }
};
/**
@@ -2489,6 +2508,11 @@ function rcube_elastic_ui()
setTimeout(function() { loader.remove(); }, 500);
})
.parent().append(loader);
+
+ // fix scrolling in iOS
+ if (ios) {
+ frame.parent().addClass('ios-scroll');
+ }
}
};