Skip to content
  • Register

    • Hide Iframe Scroll Bar in a HTML Display When Set to Full Screen

    in CSS Examples

    I've gotten a bit stumped at how to hide an unneeded scroll bar, a vertical one, on the side of the HTML display when showing an iFrame. How can I do this?

    Comments

    • If you add this CSS to the Decisions form, it will generate without any scroll bars for the entire form and be restricted to the size of the form specified in Properties > Design Size > Designer Width and Designer Height. If the view of the browser is smaller than that, the content inside will be rendered incorrectly as it will cut off and since we have hidden the scroll bar, the End User may not be aware that there is more is my only warning.

      CSS:

      /*This will need to be uploaded into Decisions onto the form so we can suppress any scroll bars from the Decisions side.*/

      #runflow_dialog {

        overflow: hidden !important;

      }

      HTML:

      <!DOCTYPE html>

      <html lang="en">

      <head>

       <meta charset="UTF-8">

       <meta name="viewport" content="width=device-width, initial-scale=1.0">

       <title>Your Page Title</title>

       <style>

         body, html {

         margin: 0;

         padding: 0;

         height: 100%;

         width: 100%;   

        }

        #container {

          min-height: 500px; /*This should match the Properties > Design Size > Designer Height in Decisions*/

          min-width: 800px; /*This should match the Properties > Design Size > Designer Width in Decisions*/

         width: 100%;

         height: 100%;   

         border: none;

          display: flex;

         align-items: stretch;

         justify-content: stretch;

         overflow: hidden;

         transition: overflow 0.5s; /* Add a smooth transition effect */

        }

       </style>

        <script>

        window.addEventListener('DOMContentLoaded', (event) => {

         var iframeWrapper = document.getElementById('container');

          

         function toggleScrollbar() {

          if (iframeWrapper.scrollHeight > iframeWrapper.clientHeight) {

           iframeWrapper.style.overflow = 'auto';

          } else {

           iframeWrapper.style.overflow = 'hidden';

          }

         }

         // Listen for window resize events

         window.addEventListener('resize', toggleScrollbar);

         // Initial check on page load

         toggleScrollbar();

        });

       </script>

      </head>

      <body>

      <!This will only show the scroll bar if the browser window is smaller than the min height and width specified.>

       <iframe id="container" src="[PutiFrameURLHere]" title="Iframe Example"></iframe>

      </body>

      </html>

    Sign In or Register to comment.

    Howdy, Stranger!

    It looks like you're new here. If you want to get involved, click one of these buttons!

    Sign In Register

    Quick Links

    Categories