move set height from map wrapper to map

yext · Sep 26, 2023 · a5191f6 · a5191f6
1 parent f89ad28
commit a5191f6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 37 deletions.
diff --git a/static/js/iframe-common.js b/static/js/iframe-common.js
@@ -70,8 +70,6 @@ export function generateIFrame(domain, answersExperienceFrame) {
   iframe.frameBorder = 0;
 
    // For dynamic iFrame sizing
-  iframe.style.height = '100%';
-  iframe.style.minHeight = '100%';
   iframe.style.width = '1px';
   iframe.style.minWidth = '100%';
   iframe.id = 'answers-frame';

diff --git a/static/js/theme-map/VerticalFullPageMapOrchestrator.js b/static/js/theme-map/VerticalFullPageMapOrchestrator.js
@@ -205,42 +205,42 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
     });
     this.setupMobileBreakpointListener();
     this.addMapComponent();
-    this.setFixedHeightsOnAndroid();
   }
 
-  /**
-   * On Android browsers, opening up the keyboard will shift the contents of the entire page up,
-   * moving the map center, and thereby causing a searchOnMapMove to be triggered.
-   * The search response would then cause the page to update,
-   * and close the keyboard, making it impossible to actually type anything into the searchbar.
-   * 
-   * Setting a fixed height on elements like .Answers-mapWrapper prevents the keyboard from shifting the content
-   * of the page.
-   */
-   setFixedHeightsOnAndroid() {
-    if (!this.isMobile() || !/Android/i.test(navigator.userAgent)) {
-      return;
-    }
-
-    setFixedHeight('.Answers-mapWrapper')
-
-    function getSingleElement(selector) {
-      const els = document.querySelectorAll(selector);
-      if (els.length === 0) {
-        console.error(`No ${selector} found, unable to set fixed height for the full page map.`);
-      } else if (els.length > 1) {
-        console.error(
-          `Multiple elements for ${selector} found, expected only 1, not setting fixed height for the full page map.`);
-      } else {
-        return els[0];
-      }
-    }
-
-    function setFixedHeight(selector) {
-      const el = getSingleElement(selector)
-      el.style.height = `${el.scrollHeight}px`
-    }
-  }
+  //NOTE: set min-height for js-answersMap instead to prevent keyboard from shifting the page
+  // /**
+  //  * On Android browsers, opening up the keyboard will shift the contents of the entire page up,
+  //  * moving the map center, and thereby causing a searchOnMapMove to be triggered.
+  //  * The search response would then cause the page to update,
+  //  * and close the keyboard, making it impossible to actually type anything into the searchbar.
+  //  * 
+  //  * Setting a fixed height on elements like .Answers-mapWrapper prevents the keyboard from shifting the content
+  //  * of the page.
+  //  */
+  //  setFixedHeightsOnAndroid() {
+  //   if (!this.isMobile() || !/Android/i.test(navigator.userAgent)) {
+  //     return;
+  //   }
+
+  //   setFixedHeight('.Answers-mapWrapper')
+
+  //   function getSingleElement(selector) {
+  //     const els = document.querySelectorAll(selector);
+  //     if (els.length === 0) {
+  //       console.error(`No ${selector} found, unable to set fixed height for the full page map.`);
+  //     } else if (els.length > 1) {
+  //       console.error(
+  //         `Multiple elements for ${selector} found, expected only 1, not setting fixed height for the full page map.`);
+  //     } else {
+  //       return els[0];
+  //     }
+  //   }
+
+  //   function setFixedHeight(selector) {
+  //     const el = getSingleElement(selector)
+  //     el.style.height = `${el.scrollHeight}px`
+  //   }
+  // }
 
   /**
    * Properly set CSS classes for mobile and desktop

diff --git a/templates/vertical-full-page-map/markup/map.hbs b/templates/vertical-full-page-map/markup/map.hbs
@@ -1 +1 @@
-<div id="js-answersMap" class="Answers-map js-answersMap" dir="ltr"></div>
+<div id="js-answersMap" class="Answers-map js-answersMap" style="min-height:1px" dir="ltr"></div>