Scrollbar problem with IFrame

4 posts, 0 answers
  1. Quim
    Quim avatar
    29 posts
    Member since:
    Nov 2006

    Posted 17 Sep 2008 Link to this post

    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>
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. KARTHIK
    KARTHIK avatar
    21 posts
    Member since:
    Oct 2013

    Posted 01 Feb 2014 Link to this post

    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.

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 04 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top