Iframe overflow takes a new line instead of a scroll bar

Question

I created a web site that shows the directory list in the server. In backend all the directories are getting indexed and shown in an another webpage called dirpage. So I used an iframe in mainpage to show the content of dirpage. The mainpage and dirpage are working great. But when the dirpage is shown in the iframe, the content overflows. The iframe width is limited to the <div> width. The problem is the iframe overflow is taking a new line to show the content. Here is the main page.

<head> <style> #divmain{ display: flex; flex-direction: row; } #div1{ background: rgb(244, 236, 225); width: 30%; height: 600px; float: left; } #div2{ background: black; width: 70%; height: 600px; float: right; } #button1{ height:44px; width:50px; float:left; } #button2{ height:44px; width:50px; float:left; } #input1{ display:none; float:right; width:295px; height:44px; } #iframe1{ height:500px; width:390px; background: transparent; overflow: scroll; } </style> </head> <body onmousedown="buttonclick1(event)"> <h1>online storage</h1> <div id="divmain"> <script> function buttonclick1(e){ if (e.target.id !== "input1") document.getElementById("input1").style.display="none" } function buttonclick2(e){ if (e.target.id == "button1") document.getElementById("input1").name="folder" if (e.target.id == "button2") document.getElementById("input1").name="file" } </script> <div id="div1"> <hr style="margin-top:0;"> <button id="button1" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>Folder</a></button> <button id="button2" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>File</a></button> <form id="form1" action="session" > <input id="input1" type="text" name=""> </form><br><br> <hr style="margin-top:10px;"><br> <iframe id="iframe1" src="dirpage.html"> </iframe> </div> <div id="div2"> </div> </div> </body>

Here is an image of dirpage and mainpage. I can't add the code of dirpage. because the content are very sensitive. It doesn't contain anything other than <p> paragraphs and buttons.

Now what I need to do is show the overflown content with a scroll bar. Not with a newline. I tried overflow: scroll. But It's not working. Any help would be greatly appreciated.

bachar97 · Accepted Answer · 2022-04-21 13:15:58Z

From what I understood, your problem is that the iframe is not expanding by width and thus instead of staying on one line when exceeding the width it's creating a new line?

EDIT: Ok after testing your page here's what I found. Initially after starting with a plaintext, it had css from the browsers that gave the text a <pre> tag with a white-space: pre-wrap; style, your problem can be fixed by removing the pre-wrap style from the css, the problem is you can only edit it from the Inspect Element menu. On the other hand, after trying with an html file instead of a txt file, the "line break" only happens after adding a spacebar to the text, which is expected. I'll see what I can do from here but I thought I would update to as opposed to keeping you waiting.

If you do inspect element on the iframe you'll see that white-space: pre-wrap is used by the browser, if you have a txt file for your iframe at least. Anyways I'm glad it worked out, I tried using either one of pre or nowrap but not both. You can always answer your own question and mark it as correct for future users.

CodeFoxDev · Accepted Answer · 2022-04-20 15:04:03Z

I recently had the same issue, and also tried overflow: hidden;, but it didn't work because there isn't a limit of how big the div can get.
So you need to limit the size of the div like: max-width: "width" and max-height: "height". Or just define the fixed width and height if you don't want it to scale.
Related answer: Overflow Scroll css is not working in the div

Edit: If overflow: hidden; didn't work try applying it for overflow-x: hidden; & overflow-y: hidden;

Didn't work. I tried both overflow: hidden and overflow: x. white-space: nowrap and white-space: pre was the solution for me.

Collectives™ on Stack Overflow

Iframe overflow takes a new line instead of a scroll bar

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions