ACP2E-3273: emulate 'display:none' better avoiding extra white space

Author: alzota

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/dimVisible.js

@@ -21,9 +21,9 @@ define([
 
             // Use "unwrapObservable" so we can handle values that may or may not be observable
             if (ko.unwrap(value)) {
-                $(element).css('visibility','visible').css('height','auto');
+                $(element).css('visibility','visible').css('height','auto').css('position','relative');
             } else {
-                $(element).css('visibility', 'hidden').css('height', '0');
+                $(element).css('visibility', 'hidden').css('height', '0').css('position', 'absolute');
             }
         },
 
@@ -37,9 +37,9 @@ define([
             let value = valueAccessor();
 
             if (ko.unwrap(value)) {
-                $(element).css('visibility', 'visible').css('height', 'auto');
+                $(element).css('visibility', 'visible').css('height', 'auto').css('position', 'relative');
             } else {
-                $(element).css('visibility', 'hidden').css('height', '0');
+                $(element).css('visibility', 'hidden').css('height', '0').css('position', 'absolute');
             }
         }
     };

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/dimVisible.test.js

@@ -26,15 +26,19 @@ define([
                 valueAccessor = jasmine.createSpy().and.returnValue(value);
 
             ko.bindingHandlers.dimVisible.init(elementToHide, valueAccessor);
-            expect(elementToHide.attr('style').indexOf('visibility: hidden; height: 0px;') !== -1).toBeTrue();
+            expect(
+                elementToHide.attr('style').indexOf('visibility: hidden; height: 0px; position: absolute;') !== -1
+            ).toBeTrue();
         });
 
         it('Check that html element is displayed based on flag value', function () {
             let value = true,
                 valueAccessor = jasmine.createSpy().and.returnValue(value);
 
             ko.bindingHandlers.dimVisible.init(elementToHide, valueAccessor);
-            expect(elementToHide.attr('style').indexOf('visibility: visible; height: auto;') !== -1).toBeTrue();
+            expect(
+                elementToHide.attr('style').indexOf('visibility: visible; height: auto; position: relative;') !== -1
+            ).toBeTrue();
         });
 
         it('Check that html element is updated based on flags changing value', function () {
@@ -44,10 +48,14 @@ define([
                 valueTrueAccessor = jasmine.createSpy().and.returnValue(valueTrue);
 
             ko.bindingHandlers.dimVisible.update(elementToHide, valueFalseAccessor);
-            expect(elementToHide.attr('style').indexOf('visibility: hidden; height: 0px;') !== -1).toBeTrue();
+            expect(
+                elementToHide.attr('style').indexOf('visibility: hidden; height: 0px; position: absolute;') !== -1
+            ).toBeTrue();
 
             ko.bindingHandlers.dimVisible.update(elementToHide, valueTrueAccessor);
-            expect(elementToHide.attr('style').indexOf('visibility: visible; height: auto;') !== -1).toBeTrue();
+            expect(
+                elementToHide.attr('style').indexOf('visibility: visible; height: auto; position: relative;') !== -1
+            ).toBeTrue();
         });
     });
 });