Scrollbar problem with IFrame

[Quim]

Hi

I'm using a Splitter to show several web pages. My problem is that I have a page with a menu on top and an Iframe object to load another page on this page and when I load this in a Splitpanel, I cannot scroll the page to the bottom. I want the scrollbar in Splitter panel not in Iframe object.

I create a different page with floating panels (with DIV), where I put the RadMenu on the Left and the Iframe object on the right. With this example I know that my Iframe object will use all the page height. However, when I put this page in the Splitpanel, I have no vertical scrollbar at all.

All other regular pages work ok with Splitter.

This is the code for my page with Iframe Object

html, body, form {
              margin:0px;
              padding:0px;
              height: 100%;
              /* overflow: hidden; */
            }
            

            #wrapper {
              width:100%;
              height:auto;
              /*margin:10px auto 10px auto;*/
              padding:0px;
              text-align:left;
              /*border:solid 1px #dadada;*/
              background-color:#ffffff;
            }
            
            #sidebar {
                position: fixed;
                width: 8em;
                height: auto;
                top: 5px;
                right: auto;
                bottom: 100px;
                left: 0;
                padding: 5px 5px 5px 5px ;
              }
            #main {
                position: fixed;
                width: auto;
                height: 100%;
                top: 5px;
                right: 0;
                bottom: 100px;
                left: 8em;
                padding-left: 4px;
                background-color: #99a6b1;
              }

HTML
<div id="wrapper">
        <div id="sidebar">
            <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical" >
                <CollapseAnimation Duration="200" Type="OutQuint" />
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Identifica&#231;&#227;o" Value="1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Detalhes" Value="2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Relat&#243;rios" Value="3">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Documentos" Value="4">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
          
           
        </div>
        <div id="main">
            <iframe id="pg" runat="server" width="100%" height="100%" frameborder="0" scrolling="no">
       
           
            </iframe>
        </div>
    </div>

[Svetlina Anati]

Hi Quim,

Please, note, that this question is not directly related to RadControls but to general ASP.NET and HTML knowledge. You can built the desired layout by using a standard IFRAME instead of RadPane. When you get it to work as you want, simply replace the IFRAME with a RadPane and everything should work as expected.

In case you notice differences between the behavior of RadPane and the IFRAME, please prepare a sample project with both test scenarios, open a new support ticket and send it back to me. Once I receive it, I will make the RadPane behave as the IFRAME.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[KARTHIK]

Hi,
  I am using iframe to redirect page inside radmenu items.it added scroll bar automatically.
i want to remove the horizontal scroll bar in radmenu item
below is the code
<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true"
                                EnableRootItemScroll="false" Style="position: absolute; right: 0;" Skin="Black"
                                EnableTextHTMLEncoding="true">
                                <Items>
                                    <telerik:RadMenuItem ImageUrl="Images/logo1.png" BackColor="Transparent" Width="32px" Height="32px" >
                                        <GroupSettings Height="510px" Width="995px" ExpandDirection="Left"></GroupSettings>
                                        <Items>
                                            <telerik:RadMenuItem>
                                                <ItemTemplate>
                                                    <iframe style="height: 510px; width: 995px" src="Dashboard.aspx" scrolling="no">
                                                    
                                                    </iframe>
                                                </ItemTemplate>
                                            </telerik:RadMenuItem>                                                
                                        </Items>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenu>


Above dashboard page have radtiles in it.

[Magdalena]

Hi Karthik,

I have run the code that you have provided but the sub menu has only vertical scrolling instead of horizontal. I have attached the screenshot of the scrolling. If this is the scrolling that you would like to hide, please, apply the following CSS to your code.

.RadMenu .rmBottomArrow,
.RadMenu .rmTopArrow {
    display: none;
}

If there is a different scrolling that you would like to hide, could you please provide me an image with a screenshot?

Regards,
Magdalena
Telerik