Applying border-radius CSS 3.0 property to RadSplitter.

[Sean]

Hi,

As the title asks -- is this possible/supported? I have this:

<style type="text/css">
    .style1
    {
        text-align: center;
        background-color: #CEDEF4;
        font-weight:bold;
        color: #224499;
        border-radius: 10px;
    }
    .RoundedStyle
    {
        border-radius: 10px !important;
    }
</style>
</head>

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Skin="Web20"
 Width="100%" BorderSize="2" OnClientLoad="OnSplitterLoaded"
BackColor="White" CssClass="RoundedStyle" >

When I do this nothing happens. I applied the CssClass to children controls of the RadSplitter just fine. 

Any ideas?

Thanks,

Sean

EDIT: Just as another quick question. I changed the width of a sliding zone inside of my splitter. The skin of the splitter is being picked up. But it looks weird because I changed the width of the sliding zone from default. Is there a way to fix this? 

[Dobromir]

Hi Sean,

The CssClass property set to the RadSplitter is applied to the DIV that wraps the splitter, but the splitter rendering is a bit more complex. In order to apply rounded corners, you need to set the CssClass property to the RadPane element, this will apply the class to the DIV element that wraps the content of the pane, e.g.:

<telerik:RadSplitter ID="RadSplitter1" runat="server">
    <telerik:RadPane ID="RadPane1" runat="server" BackColor="LightGreen" CssClass="RoundedStyle">

The problem is that all modern browsers: Firefox, Opera, Safari and Chrome have some partial support for CSS3, and all of them support border-radius and box-shadow properties. It may be necessary to use browsers specific CSS rules: The official rounded corners rule is: border-radius, to use it for Firefox you should use specific browsers CSS rule: -moz-border-radius and for Webkit browsers: -webkit-border-radius. Opera uses the official rule, but in case you want to support older Opera versions you could use: -o-border-radius. However, Internet Explorer 9 is the earliest version that supports CSS3 rules.

Regarding your second question, I am not quite sure I understand what is the exact problem. Could you please provide more information on the specific scenario? A sample page along with screenshot demonstrating the problem will be of great help solving this case.

Regards,
Dobromir
the Telerik team

[Sean]

Hi Telerik,

I set the children pane's of my RadSplitter to CssClass="RoundedStyle" but I did not see the desired effect. I attached an image, "RoundedCorner.png" which highlights where I used the CssClass="RoundedStyle" property as well as where I saw rounded corners appear. It does not appear that RadPane2. Is there more to it than this? I will play around with the styling some today.

<telerik:RadDockLayout ID="RadDockLayout1" Runat="server" onloaddocklayout="RadDockLayout_LoadDockLayout"
    onsavedocklayout="RadDockLayout_SaveDockLayout">
    <telerik:RadSplitter ID="RadSplitter1" Runat="server"
     Width="100%" BorderSize="2" BackColor="White"
        Height="600px" Skin="Web20" >
        <telerik:RadPane ID="RadPane1" Runat="server" BackColor="#6086C1"
            Scrolling="None" Width="20px" CssClass="RoundedStyle">
            <telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" BackColor="#6086C1"
                ClickToOpen="True" Skin="Web20" Width="20px">
                <telerik:RadSlidingPane ID="RadSlidingPane1" Runat="server" BackColor="#ECF4FD"
                    MinWidth="160" Scrolling="Y" Title="Settings" Width="160px">
                    <telerik:RadListBox ID="lstBxSettings" runat="server" EnableDragAndDrop="True"
                        ondropped="LstBxSettings_Dropped" Skin="Web20" style="top: 0px; left: 0px"
                        Width="100%" ondropping="LstBxSettings_Dropping">
                        <ButtonSettings TransferButtons="All" />
                        <Items>
                            <telerik:RadListBoxItem ListBox="lstBxSettings" Text="Horizontal Bar" />
                            <telerik:RadListBoxItem ListBox="lstBxSettings" Text="Vertical Bar" />
                        </Items>
                    </telerik:RadListBox>
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="RadSlidingPane2" Runat="server" BackColor="#ECF4FD"
                    MinWidth="160" Scrolling="Y" Title="Custom">
                    <telerik:RadListBox ID="lstBxCustom" runat="server" EnableDragAndDrop="True"
                        ondropped="RadListBox_Dropped" Skin="Web20" Sort="Ascending" Width="100%">
                        <ButtonSettings TransferButtons="All" />
                    </telerik:RadListBox>
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server" BackColor="#ECF4FD"
                    MinWidth="160" Scrolling="Y" Title="Historical" Width="160px">
                    <telerik:RadListBox ID="lstBxHistorical" runat="server"
                        EnableDragAndDrop="True" ondropped="RadListBox_Dropped" Skin="Web20"
                        Sort="Ascending" Width="100%">
                    </telerik:RadListBox>
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane2" Runat="server" Scrolling="None"
            BorderColor="White" CssClass="RoundedStyle" >
        </telerik:RadPane>
    </telerik:RadSplitter>
</telerik:RadDockLayout>

Regarding my second question: I have attached an image called "expanded.png" which increases the width of RadPane1 and RadSlidingZone1 from 20px to 60px. You can see that the "Web20" skin is applied to RadSlidingZone1, but it does not center on it properly, or at least does not appear to. Is this as intended? Or is there a solution to applying skins to controls with non-default dimensions?

[Dobromir]

Hi Sean,

1. As I mentioned in my previous answer, rendering of the RadSplitter is bit more complex and applying rounded corners to it is not a trivial task and is not always possible. Correct me if I am wrong, but you want to apply rounded corners to the entire splitter but not to each pane individually. To do so you need to:
   
   1. Remove the borders of RadSplitter by setting BorderSize="0". This is required because of how the borders are rendered
   2. Set CSS Class that applies border radius rule to the top left and bottom left corners to the right pane:
      

      .leftRoundedCorners
      {
          -moz-border-radius: 10px 0 0 10px;    /*top left and bottom left corners*/
      }

   3. Set CSS Class that applies border radius rule to the top right and bottom right corners to the left pane:
      

      .rightRoundedCorners
      {
          -moz-border-radius: 0 10px 10px 0;    /*top right and bottom right corners*/
      }

   4. Apply border radius to the top right corner to the first tab of the sliding pane. To achieve this you will need to assign handler to the RadSlidingZone's OnClientLoaded event and apply the CSS rules using JavaScript:
      

      function OnClientSlidingZoneLoaded(slidingZone, args)
      {
          var firstSlidingPane = slidingZone.getPaneById("<% =RadSlidingPane1.ClientID %>"); // get reference to the first sliding pane
          var firstTab = firstSlidingPane.getTabContainer(); //get reference to the tab container
      
          Sys.UI.DomElement.addCssClass(firstTab, "tabTopLeftBorder"); //add CSS Class to the firstTab
      }

      .tabTopLeftBorder
      {
          -moz-border-radius: 10px 0 0 0;
          -webkit-border-radius: 10px 0 0 0;
          -o-border-radius: 10px 0 0 0;
          border-radius: 10px 0 0 0;
      }

      
      
      
2. By design, the image that is applied as a background to the sliding zone cannot be used for a custom size. However, you can use a custom image for the background. You can apply custom background to the Web20 using the following CSS:
   

   .RadSplitter_Web20 .rspPaneTabContainer
   {
       background: url(./SlidingZoneBgrWeb20.gif) top center repeat-y !important;
   }
   .RadSplitter_Web20 .rspTabsContainer .rspPaneTabContainerDocked
   {
       background:none repeat scroll 0 0 #FFFFFF !important;
   }

   
   The image used for the background is as wide as the sliding zone.
   

For your convenience I have attached a sample page demonstrating rounded corners and the custom sliding zone's background.

Greetings,
Dobromir
the Telerik team