Applying border-radius CSS 3.0 property to RadSplitter.

4 posts, 1 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 26 Jan 2011 Link to this post

    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? 
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 31 Jan 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 31 Jan 2011 Link to this post

    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?
  5. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 01 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top