Removing Scrollbar of iframe on IE 8

In the normal cases, if we use an iframe on IE 8 having option scrolling=”no”, then the scrollbar must be hidden no matter what a browser you are using. But accidents happen.

I was using AjaxToolKit Accordion in one of the web applications, and inside the AccordionPane, i added an iframe. On IE 7, firefox, chrome this section was working perfect. The code was as follow:

<ajaxToolkit:Accordion ID=”MyAccordion” runat=”server” SelectedIndex=”0″ FadeTransitions=”false” FramesPerSecond=”40″   TransitionDuration=”250″ RequireOpenedPane=”false” SuppressHeaderPostbacks=”true”>
<ajaxToolkit:AccordionPane ID=”AccordionPane1″ runat=”server”>
<Header>Control Header</Header>
<table cellpadding=”0″ cellspacing=”0″ width=”100%”>
<td style=”height: 190px;”>
<iframe src=”MyPage.aspx” frameborder=”0″  scrolling=”no”  marginheight=”0″ marginwidth=”0″>

But the only exception was the IE 8, this code was showing a small scrollbar because of the iframe and the Ajax issue. And for sure that was not accepted. So the only solution I found to remove the scrollbar from the iframe was applying a small css trick:

<iframe src=”MyPage.aspx” frameborder=”0″ style=”width:100%; border:0; height:100%; overflow:auto;” scrolling=”no”  marginheight=”0″ marginwidth=”0″>

The overflow:auto and the height:100% solved the issue and hid the scrollbar.


One thought on “Removing Scrollbar of iframe on IE 8

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s