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

taylor
taylor
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

  • Kathryn_Decisions
    Kathryn_Decisions

    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

Categories