Hide Iframe Scroll Bar in a HTML Display When Set to Full Screen
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>
Howdy, Stranger!
Categories
- 4.2K All Categories
- 68 General
- 11 Training
- 203 Installation / Setup
- 1.1K Flows
- 108 Rules
- 262 Administration
- 212 Portal
- 494 General Q & A
- 699 Forms
- 334 Reports
- 3 Designer Extensions
- 47 Example Flows
- 53 CSS Examples
- 1 Diagram Tile
- 7 Javascript Controls
- 180 Pages
- 5 Process Mining
- New Features
- 180 Datastructures
- 69 Repository
- 221 Integrations
- 28 Multi-Tenant
- 27 SDK
- 80 Modules
- 56 Settings
- 25 Active Directory
- 12 Version 7
- 35 Version 8
- 92 Lunch And Learn Questions