Fix splitview overlapping issue (SAP#2620)

y-kkamil · Mar 21, 2022 · d9ecba2 · d9ecba2
1 parent b401d7a
commit d9ecba2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/core/src/SplitView.svelte b/core/src/SplitView.svelte
@@ -122,7 +122,7 @@
     }
 
     elements.split.style.top = `${SplitViewSvc.splitViewValues.top}px`;
-    elements.iframe.style.paddingBottom = `${SplitViewSvc.splitViewValues.bottom}px`;
+    elements.iframe.style.marginBottom = `${SplitViewSvc.splitViewValues.bottom}px`;
   };
 
   function _messageHandler(e) {
@@ -287,7 +287,7 @@
 <svelte:window on:resize={updateSizes} />
 <div
   id="splitViewContainer"
-  class="splitViewContainer {collapsed ? 'lui-collapsed' : ''}"
+  class="fd-page splitViewContainer {collapsed ? 'lui-collapsed' : ''}"
 >
   <Backdrop
     area="split-view"
@@ -335,7 +335,7 @@
   /* splitview start */
   $collapsedSplitviewHeight: 38px;
   :global(.lui-collapsed.iframeContainer.lui-split-view) {
-    padding-bottom: $collapsedSplitviewHeight;
+    margin-bottom: $collapsedSplitviewHeight;
   }
 
   :global(.splitViewContainer) {
@@ -440,7 +440,7 @@
     }
 
     .iframeSplitViewCnt {
-      background-color: var(--fd-background-color);
+      background-color: var(--sapBackgroundColor);
       position: absolute;
       width: 100%;
       bottom: 0;

diff --git a/core/src/services/split-view.js b/core/src/services/split-view.js
@@ -226,7 +226,7 @@ class SplitViewSvcClass {
           comp.dispatch('statusChanged', {
             displayed: false
           });
-          IframeHelpers.getIframeContainer().style.paddingBottom = '';
+          IframeHelpers.getIframeContainer().style.marginBottom = '';
           SplitViewSvc.sendMessageToClients('close.ok');
         });
     } else if (comp.get().mfSplitView.displayed) {
@@ -249,7 +249,7 @@ class SplitViewSvcClass {
     });
 
     this.getContainer().style.top = `${this.splitViewValues.top}px`;
-    IframeHelpers.getIframeContainer().style.paddingBottom = `${this.splitViewValues.bottom}px`;
+    IframeHelpers.getIframeContainer().style.marginBottom = `${this.splitViewValues.bottom}px`;
     setTimeout(() => {
       this.getDragger().style.top = `${this.splitViewValues.top}px`;
     });
@@ -273,7 +273,7 @@ class SplitViewSvcClass {
             collapsed: true
           });
           this.getContainer().style.top = '';
-          IframeHelpers.getIframeContainer().style.paddingBottom = '';
+          IframeHelpers.getIframeContainer().style.marginBottom = '';
         });
     }
   }

diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
@@ -584,7 +584,7 @@ describe('Luigi client linkManager', () => {
               .invoke('height')
               .should('eq', splitViewHeight);
 
-            if (`${splitViewHeight}px` === win.getComputedStyle($iframe[0]).paddingBottom) {
+            if (`${splitViewHeight}px` === win.getComputedStyle($iframe[0]).marginBottom) {
               cy.log('Positive');
             } else {
               cy.error('Negative');
@@ -617,7 +617,7 @@ describe('Luigi client linkManager', () => {
 
             const splitViewHeight = parseFloat(win.getComputedStyle($splitViewContainer[0]).height);
 
-            if (`${splitViewHeight}px` === win.getComputedStyle($iframe[0]).paddingBottom) {
+            if (`${splitViewHeight}px` === win.getComputedStyle($iframe[0]).marginBottom) {
               cy.log('Positive');
             } else {
               cy.error('Negative');

diff --git a/test/e2e-test-application/src/assets/helloWorldWC.js b/test/e2e-test-application/src/assets/helloWorldWC.js
@@ -7,13 +7,20 @@ export default class extends HTMLElement {
     const templateBtn = document.createElement('template');
     templateBtn.innerHTML = '<button>Click me!</button>';
 
+    const empty = document.createElement('template');
+    empty.innerHTML = `<section><p>Test!</p><br/><br/></section>`;
+
     this._shadowRoot = this.attachShadow({
       mode: 'open',
       delegatesFocus: false
     });
     this._shadowRoot.appendChild(template.content.cloneNode(true));
     this._shadowRoot.appendChild(templateBtn.content.cloneNode(true));
 
+    for (let index = 0; index < 20; index++) {
+      this._shadowRoot.appendChild(empty.content.cloneNode(true));
+    }
+
     this.$paragraph = this._shadowRoot.querySelector('p');
     this.$button = this._shadowRoot.querySelector('button');
     this.$button.addEventListener('click', () => {