]> git.p6c8.net - jirafeau_mojo42.git/commitdiff
[BUGFIX] Prevent bouncing fileupload field
authorDan Untenzu <untenzu@webit.de>
Thu, 23 Feb 2017 14:46:07 +0000 (15:46 +0100)
committerJerome Jutteau <jerome.jutteau@outscale.com>
Thu, 23 Feb 2017 17:34:20 +0000 (18:34 +0100)
After a file is selected in the first step of an upload,
the options are shown and the fileupload field is resized
to a much smaller field. In Chrome and other browsers
this field bounces to an area above the form.

Use relative positioning and fixed heights to prevent this
UI glitch.

Refs #71

lib/functions.js.php
media/courgette/style.css.php
media/elegantish/elegantish.css

index e952430cb586d6398368039ed681deaed0e26476..0c9a0201a65f4a6299c71355d2bc3a8d035f91e8 100644 (file)
@@ -261,12 +261,13 @@ function control_selected_file_size(max_size, error_str)
     }
     else
     {
     }
     else
     {
-        document.getElementById('options').style.display = '';
-        document.getElementById('send').style.display = '';
+        // add class to restyle upload form in next step
+        document.getElementById('upload').setAttribute('class', 'file-selected');
+        // display options
+        document.getElementById('options').style.display = 'block';
+        document.getElementById('send').style.display = 'block';
         document.getElementById('error_pop').style.display = 'none';
         document.getElementById('error_pop').style.display = 'none';
-        document.getElementById('file_select').style.left = 'inherit';
-        document.getElementById('file_select').style.height = 'inherit';
-        document.getElementById('file_select').style.opacity = '1';
+        document.getElementById('send').focus();
     }
 }
 
     }
 }
 
index faa7df30a3048be48e94b5b82a094d53f0e89edb..60359497241e0e62e3055d4bd2f9b8e17c440212 100644 (file)
@@ -157,16 +157,24 @@ input[type="submit"]:focus {
   text-align: center;
 }
 
   text-align: center;
 }
 
+#upload p {
+  margin: 0;
+}
+
 #file_select {
 #file_select {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
   width: 100%;
   width: 100%;
-  height: 100%;
+  height: 16em;
   cursor: pointer;
   opacity: 0;
 }
   cursor: pointer;
   opacity: 0;
 }
-
+  #upload.file-selected #file_select {
+    opacity: 1;
+    height: 2em;
+  }
+  #upload.file-selected fieldset {
+    background-image: none;
+  }
 
 
 /* ==========================================================================
 
 
 /* ==========================================================================
@@ -197,7 +205,6 @@ input[type="submit"]:focus {
 #options {
   position: relative;
   z-index: 10;
 #options {
   position: relative;
   z-index: 10;
-  background: #efebe9;
   width: 100%;
   height: 90%;
 }
   width: 100%;
   height: 90%;
 }
@@ -214,7 +221,7 @@ input[type="submit"]:focus {
 
 #options input[type="submit"] {
   position: relative;
 
 #options input[type="submit"] {
   position: relative;
-  left: 11.2em;
+  margin: 1em auto;
 }
 
 /* ==========================================================================
 }
 
 /* ==========================================================================
index cb18864dcd3cc06a5f28f6efece05d83d0ffc589..14ebfc1039c2a30847b2f3df556a4319a25fc335 100644 (file)
@@ -150,16 +150,19 @@ input[type="submit"]:focus {
 }
 
 #file_select {
 }
 
 #file_select {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
   width: 100%;
   width: 100%;
-  height: 100%;
+  height: 16em;
   cursor: pointer;
   opacity: 0;
 }
   cursor: pointer;
   opacity: 0;
 }
-
-
+#upload.file-selected #file_select {
+  opacity: 1;
+  height: 2em;
+}
+#upload.file-selected fieldset {
+  background-image: none;
+}
 
 /* ==========================================================================
    2 = Copyright
 
 /* ==========================================================================
    2 = Copyright

patrick-canterino.de