Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Resizing and Docking-icon

5 Answers 134 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ben Turpin
Top achievements
Rank 1
Ben Turpin asked on 16 Jun 2009, 01:15 PM
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:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
  <title></title>  
  <style type="text/css">  
    .rspTabsContainer  
    {  
      background-color: Blue;  
    }  
    .rspSlideHeaderUndockIcon  
    {  
      background-color:red;  
      background-image: url(img/close.gif);  
    }  
    .maximized  
    {  
      position:absolute;  
      top:0px;  
      left:0px;  
      right:0px;  
      bottom:0px;  
    }  
      
    .PaneRechts  
    {  
      position:relative;  
      top:0px;  
      bottom:0px;  
      background-color:Yellow;  
      width:100%;  
    }  
    .PaneLinks  
    {  
      position: relative;  
      background-color:Red;  
    }  
  </style> 
</head> 
<body> 
  <form id="form1" runat="server" class="maximized">  
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
  </telerik:RadScriptManager> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
      <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="RadPane1">  
        </telerik:AjaxSetting> 
      </AjaxSettings> 
    </telerik:RadAjaxManager> 
      <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">  
 
      <script type="text/javascript">  
 
        RadOnClientExpanded = function()  
        {  
          var Pane = $find("<%=RadSlidingZone1.ClientID %>");  
          if (Pane)  
          {  
            Pane.dockPane("RadSlidingPane3");  
          }  
        }  
 
        RadOnClientLoaded = function()  
        {  
          var Pane = $find("<%=RadSlidingZone1.ClientID %>");  
          if (Pane)  
          {  
            //Pane.expandPane("RadSlidingPane3");  
            Pane.dockPane("RadSlidingPane3");  
          }  
        }  
      </script> 
 
    </telerik:RadScriptBlock> 
  <div class="maximized">  
    <telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" ResizeMode="EndPane" 
      SplitBarsSize="0px" OnClientLoaded="RadOnClientLoaded"   
      Skin="Web20" Height="100%" Width="100%">  
      <telerik:RadPane ID="RadPane1" runat="server" MinHeight="100" 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"   
            OnClientExpanded="RadOnClientExpanded" PersistScrollPosition="true"   
            TabView="ImageOnly" Title="TITEL" Width="250">  
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
              <Items> 
                <telerik:RadPanelItem runat="server" Text="BOOM">  
                  <Items> 
                    <telerik:RadPanelItem> 
                      <ItemTemplate> 
                        hierin kan de boom komen  
                      </ItemTemplate> 
                    </telerik:RadPanelItem> 
                  </Items> 
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
                  <Items> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                    </telerik:RadPanelItem> 
                  </Items> 
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">  
                  <Items> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                    </telerik:RadPanelItem> 
                  </Items> 
                </telerik:RadPanelItem> 
              </Items> 
            </telerik:RadPanelBar> 
          </telerik:RadSlidingPane> 
        </telerik:RadSlidingZone> 
      </telerik:RadPane> 
      <telerik:RadPane ID="RadPane8" runat="server" CssClass="PaneRechts">  
        blaat blaat blaat  
      </telerik:RadPane> 
    </telerik:RadSplitter> 
  </div> 
  </form> 
</body> 
</html> 
 

5 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 19 Jun 2009, 08:23 AM
demopage.zip
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-image: url(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.
0
Ben Turpin
Top achievements
Rank 1
answered on 19 Jun 2009, 12:44 PM
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
0
Svetlina Anati
Telerik team
answered on 19 Jun 2009, 02:07 PM
screenshot-ff.jpg
screenshot-ie8.jpg
screenshot-safari.jpg
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.
0
Ben Turpin
Top achievements
Rank 1
answered on 19 Jun 2009, 02:13 PM
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,
0
Accepted
Svetlina Anati
Telerik team
answered on 19 Jun 2009, 04:08 PM
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-image: url(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.
Tags
Splitter
Asked by
Ben Turpin
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Ben Turpin
Top achievements
Rank 1
Share this question
or