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
- 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();
+#upload p {
+ margin: 0;
+}
+
- position: absolute;
- top: 0;
- left: 0;
cursor: pointer;
opacity: 0;
}
cursor: pointer;
opacity: 0;
}
+ #upload.file-selected #file_select {
+ opacity: 1;
+ height: 2em;
+ }
+ #upload.file-selected fieldset {
+ background-image: none;
+ }
/* ==========================================================================
/* ==========================================================================
#options {
position: relative;
z-index: 10;
#options {
position: relative;
z-index: 10;
width: 100%;
height: 90%;
}
width: 100%;
height: 90%;
}
#options input[type="submit"] {
position: relative;
#options input[type="submit"] {
position: relative;
}
/* ==========================================================================
}
/* ==========================================================================
- position: absolute;
- top: 0;
- left: 0;
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