How to Ensure my form has the same length as the block next to it?

  • msamutoglu
    Gevraagd op 4 april 2024 om 04:44
    Ik heb een magento 2 website hierop heb een pagina met een jotform en een block met test over de formulier zie de afbeelding of de webpagina die mee gestuurd word. nu zou ik graag willen dat mijn formulier mee scaled met de block ernaast zodat ze dezelfde lengte zijn hoe doe ik dit ik heb nu deze code: 
    <iframe
          id="JotFormIFrame-240852448016354"
          title="Registreren als vakman"
          onload="window.parent.scrollTo(0,0)"
          allowtransparency="true"
          allow="geolocation; microphone; camera; fullscreen"
          src="https://form.jotform.com/240852448016354"
          frameborder="0"
          style="min-width:100%;max-width:100%;height:539px;border:none;"
          scrolling="no"
        >

        </iframe>    
        <script type="text/javascript">
        var ifr = document.getElementById("JotFormIFrame-240852448016354");
        if (ifr) {
          var src = ifr.src;
          var iframeParams = [];
          if (window.location.href && window.location.href.indexOf("?") > -1) {
            iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));
          }
          if (src && src.indexOf("?") > -1) {
            iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));
            src = src.substr(0, src.indexOf("?"))
          }
          iframeParams.push("isIframeEmbed=1");
          ifr.src = src + "?" + iframeParams.join('&');
        }
        window.handleIFrameMessage = function(e) {
          if (typeof e.data === 'object') { return; }
          var args = e.data.split(":");
          if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }
          if (!iframe) { return; }
          switch (args[0]) {
            case "scrollIntoView":
              iframe.scrollIntoView();
              break;
            case "setHeight":
              iframe.style.height = args[1] + "px";
              if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {
                iframe.style.minHeight = args[1] + "px";
              }
              break;
            case "collapseErrorPage":
              if (iframe.clientHeight > window.innerHeight) {
                iframe.style.height = window.innerHeight + "px";
              }
              break;
            case "reloadPage":
              window.location.reload();
              break;
            case "loadScript":
              if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }
              var src = args[1];
              if (args.length > 3) {
                  src = args[1] + ':' + args[2];
              }
              var script = document.createElement('script');
              script.src = src;
              script.type = 'text/javascript';
              document.body.appendChild(script);
              break;
            case "exitFullscreen":
              if      (window.document.exitFullscreen)        window.document.exitFullscreen();
              else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();
              else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();
              else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();
              else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();
              break;
          }
          var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;
          if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {
            var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};
            iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");
          }
        };
        window.isPermitted = function(originUrl, whitelisted_domains) {
          var url = document.createElement('a');
          url.href = originUrl;
          var hostname = url.hostname;
          var result = false;
          if( typeof hostname !== 'undefined' ) {
            whitelisted_domains.forEach(function(element) {
                if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) ||  hostname === element ) {
                    result = true;
                }
            });
            return result;
          }
        };
        if (window.addEventListener) {
          window.addEventListener("message", handleIFrameMessage, false);
        } else if (window.attachEvent) {
          window.attachEvent("onmessage", handleIFrameMessage);
        }
        </script>
  • msamutoglu
    Geantwoord op 4 april 2024 om 06:32
    sorry in english:  
    I have a magento 2 website on this I have a page with a jotform and a block with test over the form see the image or the webpage that is sent along. now I would like my form to scale with the block next to it so they are the same length how do I do this I have this code now:




  • Kyle Jotform Support
    Geantwoord op 4 april 2024 om 08:41

    Hi Mirac,

    Thanks for reaching out to Jotform Support. To make your form scale with the block next to it,  you can use CSS Flexbox. You can inject the CSS to your Magento theme’s CSS file below:

    .container {
      display: flex; /* this will make its children (the form and the block) lay out in a row */
    }


    #JotFormIFrame-240852448016354, .your-block-class {
      flex: 1; /* this will make them take up equal width */
    }

    Please replace .your-block-class with he actual class of your block

    Give it a try, and let us know how it goes.