FLUID-5532: Fixing iframe width and scrolling in iOS

fluid-project · Apr 11, 2017 · 42cadf4 · 42cadf4
1 parent 683df65
commit 42cadf4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/framework/preferences/css/stylus/PrefsEditor.styl b/src/framework/preferences/css/stylus/PrefsEditor.styl
@@ -186,7 +186,7 @@
         opacity: 0.3;
     }
 
-    // ON/OFF Switch for checkboxes
+    // ON/OFF Switch
     .fl-prefsEditor-onoff {
         padding: 0 1rem;
 

diff --git a/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl b/src/framework/preferences/css/stylus/SeparatedPanelPrefsEditorFrame.styl
@@ -23,6 +23,14 @@
 
 html {
     overflow: hidden;
+
+    .fl-hidden-accessible {
+        position: fixed;
+
+        @media screen and (min-width: 40em) {
+            position: absolute;
+        }
+    }
 }
 
 /* Preferences Editor Separated Panel styles */
@@ -39,6 +47,11 @@ html {
     .fl-prefsEditor {
         font-family: 'OpenSans',"Myriad Pro", Helvetica, Arial, sans-serif;
         line-height: 1.2 !important; // FLUID-4959: fix the line height so it doesn't scale with the Preferences Editor line space scaling.
+
+        // Required to force the iframe to fit the device width and scroll on iOS
+        width: 1px;
+        min-width: 100%;
+        overflow: scroll;
     }
 
     // Preference Panels
@@ -78,7 +91,7 @@ html {
                 margin: -1px;
                 overflow: hidden;
                 padding: 0;
-                position: absolute;
+                position: fixed;
                 width: 1px;
             }
 

diff --git a/src/framework/preferences/html/SeparatedPanelPrefsEditorFrame.html b/src/framework/preferences/html/SeparatedPanelPrefsEditorFrame.html
@@ -2,6 +2,7 @@
 <html  lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta content="width=device-width, initial-scale=1.0" name="viewport">
 
         <link rel="stylesheet" type="text/css" href="../../../lib/normalize/css/normalize.css" />
         <link rel="stylesheet" type="text/css" href="../../../framework/core/css/fluid.css" />
@@ -22,9 +23,7 @@
      </head>
 
     <body class="fl-prefsEditor-separatedPanel fl-focus">
-        <div class="fl-hidden">
-            <div class="flc-toc-tocContainer"></div>
-        </div>
+        <div class="flc-toc-tocContainer fl-hidden"></div>
     </body>
 
 </html>