Put padding on inner div to stop animation jump, no important on hidden-js so that size can be calculated by JS.

3 files changed, 7 insertions, 5 deletions

diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 5a523bebd..52d40c540 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -1345,7 +1345,7 @@ ul.breadcrumb {
 
 // hide anything with this class if js is working
 .js .hidden-js {
-  display: none !important;
+  display: none;
   visibility: hidden;
 }
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 1d18b4d98..af178698c 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -377,6 +377,9 @@ $.fn.drawer = function(id, ajax) {
             if (!d.length) {
                 d = $('<div id="' + id + '">');
             }
+            // Put the padding on an inner div to prevent the jarring jump at end of hide/show animation
+            var innerDiv = $('<div>').css({ padding: '1em' });
+            d.wrapInner(innerDiv);
             var max_height = $(window).height() - $('.content').offset().top - $('.shadow-wrap').height();
             var height = d.height();
             if (!height || height > max_height) {
@@ -386,12 +389,11 @@ $.fn.drawer = function(id, ajax) {
                 backgroundColor: 'white',
                 height: height,
                 display: 'none', zIndex: 1001, position: 'relative',
-                overflow: 'auto',
-                padding: '1em'
+                overflow: 'auto'
             }).removeClass('hidden-js');
             if (ajax) {
                 var href = $this.attr('href') + ';ajax=1';
-                d.load(href);
+                innerDiv.load(href);
             }
             d.find('h2').css({ marginTop: 0 });
             $('.shadow-wrap').append(d);
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index b6859f486..8ee217dff 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -441,7 +441,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             document.getElementById('side-form').style.display = 'block';
         }
         $('#side').hide();
-        heightFix('#report-a-problem-sidebar:visible', '.content', 26);
+        heightFix('#report-a-problem-sidebar', '.content', 26);
 
         // If we clicked the map somewhere inconvenient
         var sidebar = $('#report-a-problem-sidebar');