Resizing and Docking-icon

6 posts, 1 answers
  1. Ben Turpin
    Ben Turpin avatar
    27 posts
    Member since:
    Jun 2008

    Posted 16 Jun 2009 Link to this post

    Hi,

    I've two problems with the radsplitter. I'm using only one splitter, and two radpanes, and one radslidingzone.
    The problems are:
    - resizing the browser, messes up my screen
    - how can I change the dock-icon? Changing it with the class rspSlideHeaderUndockIcon doesn't do it.

    Thanks in advance

    This is the source:
    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5 <html xmlns="http://www.w3.org/1999/xhtml">  
    6 <head runat="server">  
    7   <title></title>  
    8   <style type="text/css">  
    9     .rspTabsContainer  
    10     {  
    11       background-color: Blue;  
    12     }  
    13     .rspSlideHeaderUndockIcon  
    14     {  
    15       background-color:red;  
    16       background-image: url(img/close.gif);  
    17     }  
    18     .maximized  
    19     {  
    20       position:absolute;  
    21       top:0px;  
    22       left:0px;  
    23       right:0px;  
    24       bottom:0px;  
    25     }  
    26       
    27     .PaneRechts  
    28     {  
    29       position:relative;  
    30       top:0px;  
    31       bottom:0px;  
    32       background-color:Yellow;  
    33       width:100%;  
    34     }  
    35     .PaneLinks  
    36     {  
    37       position: relative;  
    38       background-color:Red;  
    39     }  
    40   </style> 
    41 </head> 
    42 <body> 
    43   <form id="form1" runat="server" class="maximized">  
    44   <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
    45   </telerik:RadScriptManager> 
    46     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
    47       <AjaxSettings> 
    48         <telerik:AjaxSetting AjaxControlID="RadPane1">  
    49         </telerik:AjaxSetting> 
    50       </AjaxSettings> 
    51     </telerik:RadAjaxManager> 
    52       <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
    53  
    54       <script type="text/javascript">  
    55  
    56         RadOnClientExpanded = function()  
    57         {  
    58           var Pane = $find("<%=RadSlidingZone1.ClientID %>");  
    59           if (Pane)  
    60           {  
    61             Pane.dockPane("RadSlidingPane3");  
    62           }  
    63         }  
    64  
    65         RadOnClientLoaded = function()  
    66         {  
    67           var Pane = $find("<%=RadSlidingZone1.ClientID %>");  
    68           if (Pane)  
    69           {  
    70             //Pane.expandPane("RadSlidingPane3");  
    71             Pane.dockPane("RadSlidingPane3");  
    72           }  
    73         }  
    74       </script> 
    75  
    76     </telerik:RadScriptBlock> 
    77   <div class="maximized">  
    78     <telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" ResizeMode="EndPane" 
    79       SplitBarsSize="0px" OnClientLoaded="RadOnClientLoaded"   
    80       Skin="Web20" Height="100%" Width="100%">  
    81       <telerik:RadPane ID="RadPane1" runat="server" MinHeight="100" ToolTip="pane1" CssClass="PaneLinks">  
    82         <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" ClickToOpen="True">  
    83           <telerik:RadSlidingPane ID="RadSlidingPane3" runat="server" BackColor="Aqua"  style="overflow:scroll" 
    84             CollapseText="collapsie" DockText="DOCKIE" EnableResize="False" MinWidth="250"   
    85             OnClientExpanded="RadOnClientExpanded" PersistScrollPosition="true"   
    86             TabView="ImageOnly" Title="TITEL" Width="250">  
    87             <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
    88               <Items> 
    89                 <telerik:RadPanelItem runat="server" Text="BOOM">  
    90                   <Items> 
    91                     <telerik:RadPanelItem> 
    92                       <ItemTemplate> 
    93                         hierin kan de boom komen  
    94                       </ItemTemplate> 
    95                     </telerik:RadPanelItem> 
    96                   </Items> 
    97                 </telerik:RadPanelItem> 
    98                 <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
    99                   <Items> 
    100                     <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
    101                     </telerik:RadPanelItem> 
    102                     <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
    103                     </telerik:RadPanelItem> 
    104                   </Items> 
    105                 </telerik:RadPanelItem> 
    106                 <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">  
    107                   <Items> 
    108                     <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
    109                     </telerik:RadPanelItem> 
    110                     <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
    111                     </telerik:RadPanelItem> 
    112                   </Items> 
    113                 </telerik:RadPanelItem> 
    114               </Items> 
    115             </telerik:RadPanelBar> 
    116           </telerik:RadSlidingPane> 
    117         </telerik:RadSlidingZone> 
    118       </telerik:RadPane> 
    119       <telerik:RadPane ID="RadPane8" runat="server" CssClass="PaneRechts">  
    120         blaat blaat blaat  
    121       </telerik:RadPane> 
    122     </telerik:RadSplitter> 
    123   </div> 
    124   </form> 
    125 </body> 
    126 </html> 
    127  

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Jun 2009 Link to this post

    Hello Ben,

    Straight to your questions:

    1. In order to solve the resize issue, you should also make the following configurations to your layout:

      1. Include the following style in your page's head:

        html, body, form  
          {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
          }   

      2. Set 22px width to the RadPane which holds the RadSlidingZone and also set Locked=true for it as shown below:

        <telerik:RadPane ID="RadPane1" runat="server" MinHeight="100" Width="22px" Locked="true" 
                          ToolTip="pane1" CssClass="PaneLinks">  
                          <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" ClickToOpen="True">  
                              <telerik:RadSlidingPane ID="RadSlidingPane3" runat="server" BackColor="Aqua" Style="overflow: scroll" 
                                  CollapseText="collapsie" DockText="DOCKIE" EnableResize="False" MinWidth="250" 
    2. The CSS class you have used is the correct one. Howwver, by default there is an image for the icon set and that is why your setting is not applied. In order to override it you should give higher priority to yours and this can be done by using teh keyword !important. This is not needed for teh background setting because it there is not such by default - that is why yours gets applied. I also assuem that you would like to keep your custom icon when the mouse is over the icon - in order to do this you should set it to the rspSlideHeaderUndockIconOver class as well as shown below:

       .rspSlideHeaderUndockIcon,   
          .rspSlideHeaderUndockIconOver    
          {     
            background-color:red;     
            background-imageurl(img/close.gif) !important;     
          }    

    I also noticed that you have tried to ajaxify the RadPane1 - I am not sure why you need this since it is only a container for the sliding panes. In this case you should ajaxify the whole splitter. If you want to ajaxify the content of a sliding pane, you should wrap it in a panel and ajaxify the panel. More details about controlling RadSplitter with AJAX are available below:

    http://www.telerik.com/support/kb/aspnet-ajax/splitter/controlling-the-behavior-of-radsplitter-or-a-splitter-pane-with-radajax.aspx

    At last, I also recommend to set VisibleDuringInit="false" for your splitter - this will hide the initial resize form the end user and you will get a better behavior.

    I hope that my explanations are detailed enough and helpful and for your convenience I attached your modified page.


    Greetings,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ben Turpin
    Ben Turpin avatar
    27 posts
    Member since:
    Jun 2008

    Posted 19 Jun 2009 Link to this post

    Hi Svetlina,

    thanks for your response, the resizing now works, but the image doesn't show (IE8, Safari4, FF3). Can you please give me another solution for this.

    Thanks in advance
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Jun 2009 Link to this post

    Hello Ben,

    I tested the page I provided in my last post under IE8, FF3 and safari4 but it worked as expected everywhere - please see the attached screenshots for your reference. As you can see there, the icon is not shown which means that it is correctly overridden. Would you please let me know what I am missing?

    Regards,
    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.
  6. Ben Turpin
    Ben Turpin avatar
    27 posts
    Member since:
    Jun 2008

    Posted 19 Jun 2009 Link to this post

    Hi Svetlina,

    The background-color is just for testing, so when I remove it from my CSS, I don't see the background-image.

    Kind regards,
  7. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Jun 2009 Link to this post

    Hi Ben,

    I again tested the page and I noticed that the image is correctly set. However, you are right that it is actually not visible - this si due to the fact that the default background position is different than 0 0 because sprites are used for teh icons. This being said, in order to get the desired result you should also set the background position as shown below:


    .rspSlideHeaderUndockIcon,   
        .rspSlideHeaderUndockIconOver    
        {     
       
          background-imageurl(img/close.gif) !important;      
          background-position: 0 0 !important;  
            
        }    


    Best wishes,
    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