Splitbar css use to work, not in Q1 2009

5 posts, 1 answers
  1. Tim
    Tim avatar
    11 posts
    Member since:
    Feb 2009

    Posted 23 Jun 2009 Link to this post

    The code (css) below USE TO work with Q3 2008, now we upgraded to Q1 2009 and it does not, why change it?

      <style type="text/css">
     
        .collapseBarHorizontalExpand,  
        .collapseBarHorizontalExpandOver  
        {  
           background-image: url(images/arrowExpand.jpg)!important;
           height:10px!important;
        }
        
        .collapseBarHorizontalCollapse,  
        .collapseBarHorizontalCollapseOver
        {  
           background-image: url(images/arrowCollapse.jpg)!important;
           height:10px!important;
        }
        
        .resizeBarHorizontal,
        .resizeBarOverHorizontal,
        .collapseBarHorizontalWrapper
        {
            background-color:#5f5c5a!important;
            height: 10px !important;
            
        }
      </style>

    Can you give us the new equivalent to these? I saw some, like rspCollapseBarHorizontalExpand, but I cannot just stick/replace with rsp and it works, any ideas on the change?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 Jun 2009 Link to this post

    Hello Tim,

    Indeed, the CSS naming conventions of all the RadControls were changed in order to make them consistent. You can find more information below:

    http://www.telerik.com/help/aspnet-ajax/splitter-changes-and-backwards-compatibility.html

    In your specific case, all you should do is to add rsp prefix and change the first letter to be capital as shown below:

    <style type="text/css">  
       
        .rspCollapseBarHorizontalExpand,    
        .rspCollapseBarHorizontalExpandOver    
        {    
           background-imageurl(images/arrowExpand.jpg)!important;  
           height:10px!important;  
        }   
          
        .rspCollapseBarHorizontalCollapse,    
        .rspCollapseBarHorizontalCollapseOver  
        {    
           background-imageurl(images/arrowCollapse.jpg)!important;  
           height:10px!important;  
        }  
          
        .rspResizeBarHorizontal,  
        .rspResizeBarOverHorizontal,  
        .rspCollapseBarHorizontalWrapper  
        {  
            background-color:#5f5c5a!important;  
            height10px !important;  
              
        }  
      </style>  
     

    Let us know how it goes.

    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. Tim
    Tim avatar
    11 posts
    Member since:
    Feb 2009

    Posted 26 Jun 2009 Link to this post

    Didn't help, thanks though!.. That is what I figured and tried too, but changing to rsp does change some, see what I mean:

    Pre upgrade: http://timmaxey.com/Q3-2008.jpg
    After upgrade: http://timmaxey.com/Q1-2009.jpg

    I am obviously missing some css's that the Q3-2008 did not need that the Q1-2009 does, can you tell me which ones I am missing?

    BTW: The splitter IS using "Sunset" skin, but I do have !important on just these to make the bar bigger. Basically all I want is the splitbar larger and a different image to fill that larger bar, make sense?
  5. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 29 Jun 2009 Link to this post

    Hi Tim,
    Here is the CSS you need for the Q1 2009 version of the RadSplitter:
    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css">   
        
        .rspCollapseBarHorizontalExpand,     
        .rspCollapseBarHorizontalExpandOver     
        {     
           background: #1E90BB url(images/arrowExpand.jpg) no-repeat 0 0!important;   
           height:8px!important;   
           width:23px!important;   
        }    
           
        .rspCollapseBarHorizontalCollapse,     
        .rspCollapseBarHorizontalCollapseOver   
        {     
           background: #1E90BB url(images/arrowCollapse.jpg) no-repeat 0 0!important;   
           height:8px!important;   
           width:23px!important;   
        }   
           
        .rspResizeBarHorizontal,   
        .rspResizeBarOverHorizontal,   
        .rspCollapseBarHorizontalWrapper   
        {   
            background:#5f5c5a!important;   
            height: 8px !important;   
               
        }   
      </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" />         
             
            <telerik:RadSplitter ID="RadSPlitter1" runat="server" Orientation="Horizontal" Skin="Sunset"  
                SplitBarsSize="8"
                <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Backward" /> 
                <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane> 
            </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 

    I have attached my test page for your reference as well.

    Greetings,
    Tsvetie
    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. Tim
    Tim avatar
    11 posts
    Member since:
    Feb 2009

    Posted 29 Jun 2009 Link to this post

    Worked like a champ!, thank you very much!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017