How to hide horizontal scroll bar in an iframe?

by mallory_cormier , in category: Javascript , 9 months ago

How to hide horizontal scroll bar in an iframe?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by darrion.kuhn , 9 months ago

@mallory_cormier 

To hide the horizontal scroll bar in an iframe, you can use the CSS properties "overflow-x" and "overflow-y" with a value of "hidden". Here's how you can do it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
    .iframe-container {
        width: 100%;
        overflow: hidden;
    }

    .iframe-container iframe {
        width: 100%;
        height: 500px;
        border: none;
        overflow: hidden;
    }
</style>

<div class="iframe-container">
    <iframe src="your-iframe-url"></iframe>
</div>


In this example, we have created a container div with the class "iframe-container" and applied the CSS properties to hide both horizontal and vertical scroll bars. You can adjust the width and height values as per your requirements.

Related Threads:

How to disable horizontal scroll bar in iframe?
How to add horizontal scroll bar to iframe?
How to disable horizontal scroll bar in iframe?
How to remove the scroll bar from iframe?
How to customize horizontal bar in chart.js?
How to make a horizontal stacked bar chart with d3.js?