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

taylor · June 10

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?

Kathryn_Decisions · June 10

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>

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

Comments

Howdy, Stranger!

Categories