CODEWITHSUNDEEP
htmlcssinternet-exploreriframeoverflow
Scrum Tool
Scrum Tool

Reputation: 1

Issue with iFrame and overflow:hidden in IE11

I am running into an issue that apparently only exists in IE 11. This is for an intranet page. The relevant code is below.

<!DOCTYPE HTML>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <meta http-equiv="X-UA-Compatible" content="IE=11" />
    <title>Result</title>
    </head>
    <body>
        <div id="chatcontent">
            <iframe class="noscrolling" src="intranetsharepoint" target="_blank" scrolling="no"></iframe>           
        </div>
    </body>
</html>

stylesheet.css

body {
    background-color: #F0F8FF;
}
#chatcontent{
    width:20%;
    margin: auto;
}
.noscrolling{
    height: 50px;
    width: 120px;
    overflow: hidden;
    border: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}
iframe{
    overflow-x: hidden;
}

I have been banging my head against the wall trying to figure out why, in all of the other browsers, the scrollbars disable themselves, but in IE 11 they refuse to sod off in the iFrame element. It works just fine when putting overflow: hidden in the body, can't scroll anywhere, only seems to not work in iFrame. I have tried every variation of overflow: hidden, scrolling=no, forcing html 4 via !DOCTYPE declaration, compatibility with older versions of IE, and nothing seems to be working. Any advice at this point would be a godsend. I saw a snippet of code that would have made an iFrame out of JS, but I don't understand enough of the language to put it together with what I already have. Any help would be greatly appreciated. It works as intended in Chrome and FF.

Upvotes: 0

Views: 2026

Answers (2)

Mr. Hugo
Mr. Hugo

Reputation: 12592

Adding an URL in the SRC of the IFRAME make the scrollbars disappear in IE11 (tested).

Upvotes: 1

pepperjack
pepperjack

Reputation: 663

It may have something to do with the code INSIDE of the IFrame. Try posting that in your question. Also, you can research AJAX for JavaScript, and create a type of IFrame out of AJAX. Like you said before, it IS a bit confusing at first, comment on my answer if you need me to give a complete example. Here is a link to a basic example of AJAX: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
This will let you get the content of a page, copy and paste it into a div, and make it be a type of IFrame. Then, you can also edit the code of the page, and set the attributes necessary (overflow:hidden) to the div.

Upvotes: 0

Related Questions