Fullscreen problem

6 posts, 1 answers
  1. Joeri
    Joeri avatar
    11 posts
    Member since:
    Nov 2008

    Posted 22 Dec 2008 Link to this post

    with this code :

    1             <telerik:RadSplitter ID="rsSS" runat="server" BorderSize="0" Orientation="Horizontal" FullScreenMode="true" EnableEmbeddedSkins="false" Skin="DnsReg">  
    2                 <telerik:RadPane ID="rpSSHeader" runat="server" Locked="true" Height="70px">  
    3                     header  
    4                 </telerik:RadPane> 
    5                 <telerik:RadSplitBar ID="rsp" runat="server" /> 
    6                 <telerik:RadPane ID="rpSSBody" runat="server" Locked="true" Scrolling="None">  
    7                     <telerik:RadSplitter ID="rsMain" runat="server" BorderSize="0" FullScreenMode="true" EnableEmbeddedSkins="false" Skin="DnsReg" Orientation="Vertical">  
    8                        <telerik:RadPane ID="rpOverviewItems" runat="server" BorderWidth="0">  
    9                             <telerik:RadSlidingZone ID="rszDomains" runat="server" Width="20px" ClickToOpen="false" DockedPaneId="rpDomains">  
    10                                 <telerik:RadSlidingPane ID="rpDomains" runat="server" CssClass="slidingPane" Width="180px" DockText="Domains" Title="Domains">  
    11                                     test 1<br /> 
    12                                     test 3  
    13                                 </telerik:RadSlidingPane> 
    14                                  <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" CssClass="slidingPane" Width="180px" DockText="Hosting" Title="Hosting">  
    15                                     test 1<br /> 
    16                                     <asp:LinkButton ID="lbKlikHier" runat="server" Text="Klik hier" OnClick="lbKlikHier_Click" /> 
    17                                 </telerik:RadSlidingPane> 
    18                             </telerik:RadSlidingZone> 
    19                         </telerik:RadPane> 
    20                        <telerik:RadSplitBar ID="rsb1" runat="server" CssClass="test" /> 
    21                        <telerik:RadPane ID="RadPane1" runat="server">  
    22                             <asp:Panel ID="pnlPage" runat="server">  
    23                                     <telerik:RadSplitter ID="rp" runat="server" ResizeWithParentPane="true" PanesBorderSize="0">  
    24                                         <telerik:RadPane ID="rpPage" runat="server" ContentUrl="test.aspx" /> 
    25                                     </telerik:RadSplitter> 
    26                             </asp:Panel> 
    27                             <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="padding-top: 125px;" Height="75px" Width="75px" Transparency="6" BackColor="White">  
    28                                 <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' style="border:0;" /> 
    29                             </telerik:RadAjaxLoadingPanel> 
    30                        </telerik:RadPane> 
    31                     </telerik:RadSplitter> 
    32                 </telerik:RadPane> 
    33             </telerik:RadSplitter> 


    I have this result : http://www.x-it.be/fullscreen.jpg

    So my fullscreen function doesn't work ... and I don't understand why ? Could somebody explain me what the problem is ?
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Dec 2008 Link to this post

    Hi Joeri,

    I examined the provided code and I suggest to go through the following steps:

    1. Remove the FullScreenMode property from all the splitters. Set the outest parent splitter's Width and Height properties to 100% and if it is nested in another element, e.g DIV, set explicitly its height, too (do this for all the parent elements of the outest RadSplitter).

    2. Put the following style in the page's head section:

    <style>  
    html, body, form  
    {  
      height: 100%;  
      margin: 0px;  
      padding: 0px;  
    }  
    </style> 

    3. Do not set any sizes to the nested splitters if they are directly nested in a RadPane  - when a RadSplitter is directly nested in a RadPane, it automatically resizes itself to occupy 100% of the parent pane. If you set width, height, fullscreenmode, the splitters will make a lot of calculations to resize themselves and this is not necessary and slows down the performance significantly. If the nested splitters are not directly nested in a RadPane but in another element, set their sizes and also set the ResizeWithParentPane property to false.

    4. I also noticed that you have only two radPanes in the outest splitter and you have set Locked=true for both of them - this is invalid - having only one of them locked is enough to not let the other one be changed.

    For your convenience I attached your modified page (I removed the custom skins settings in order to visualize the splitters). 

    Kind 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. Joeri
    Joeri avatar
    11 posts
    Member since:
    Nov 2008

    Posted 26 Dec 2008 Link to this post

    I have now another problems in FireFox :

    Printscreen : http://www.x-it.be/scrollbars.jpg

    I have a 1 pixel white border in my iFrame. I can't find the problem in the css


  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 26 Dec 2008 Link to this post

    Hello Joeri,

    I was able to reproduce the problem, your layout is very complex and the problem is due to complicated calculaton of sizes of multiple nested splitters.  I suggest to put the following style in your page's head:

     .RadSplitter_[Your_Skin_Name].nested  
        {  
          margin0px !important;   
        } 

    For the attached in my previous post particular page, the style should look like the following:

     .RadSplitter_Default.nested  
        {  
          margin0px !important;   
        } 


    Best wishes,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Trent
    Trent avatar
    6 posts
    Member since:
    Mar 2009

    Posted 06 May 2009 Link to this post


    Great!  The:

     

     

    <style type="text/css">

     

     

    html, body, form

     

    {

     

    height: 100%;

     

     

    margin: 0px;

     

     

    padding: 0px;

     

    }

     

    </style>

    Fixed the the issue I was having.

    Thanks

     

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 May 2009 Link to this post

    Hi Trent,

    I am glad that the provided solution helped you achieve the desired result. However, in order to be precise enough and for others who might encounter the same problem, this style will not solve all the layout problems. In order to correctly configure the RadSplitter in percentages, one should set explicit height (either in percentages or pixels) to all the splitter's parent elements, not only the html, body and form, but also to DIV, TD, TR, TABLE, etc if there are such.

    An online demo which explains the full screen setup is available below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017