How to add horizontal scroll bar to iframe?
How to add horizontal scroll bar to iframe?
1 answer
by
giovanny.lueilwitz ,
7 months ago
@haylee.mertz
To add a horizontal scroll bar to an <iframe>, you can use the CSS overflow-x property to control the horizontal overflow behavior of the iframe content.
Here's an example of how you can add a horizontal scroll bar to an <iframe> element:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html>
<html>
<head>
<style>
.iframe-container {
width: 400px;
overflow-x: auto; /* Adds horizontal scroll bar */
overflow-y: hidden; /* Hides vertical scroll bar */
}
iframe {
width: 100%;
height: 400px;
border: none;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe src="https://www.example.com"></iframe>
</div>
</body>
</html>
|
In the above example, the <iframe> is placed inside a container element with the class iframe-container. The container has a fixed width and the overflow-x: auto; property set, which adds a horizontal scroll bar when the content inside the iframe overflows horizontally.
You can adjust the width and height properties of the <iframe> and its container to fit your needs.