Community & Support
Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Splitter / RadSplitter integration with relatively positioned elements

RadSplitter integration with relatively positioned elements

Article Info

Rating: 4

Article information

Article relates to

 RadSplitter

Created by

 Petya, Telerik

Last modified

 April 14, 2008

Last modified by

 Svetlina, telerik



PROBLEM
Due to the relative positioning of  RadMenu, RadListBox, RadUpload and RadTabStrip, when any of these controls is located inside a RadPane and the pane content is scrolled, the control does not scroll.





SOLUTION
We suggest two ways of solving this issue both concerning CSS stylesheets.

Method1

In RadControls/Splitter/Skins/<used_skin>/styles.css file add the following classes:

.RadSplitter_<used_skin> .pane div,
.RadSplitter_<used_skin> .paneHorizontal
div
{
    position: relative;
}
    

For example if your skin is Default, then in RadControls/Splitter/Skins/Default/styles.css file add

.RadSplitter_Default .pane div,
.RadSplitter_Default .paneHorizontal
div
{
    position: relative;
}
    


Method2

On your .aspx page containing RadPane add the following CSS class and then apply it to RadPane:

<style>
.test
{
    position:relative;
}
</style>

<radspl:RadPane CssClass
="test"





The same problem exists when using RadSpltter for ASP.NET AJAX with integration with elements which has position: relative. The logic stays the same, except for slight differences which are caused by having the skins embedded in the Telerik.Web.UI.dll.

Method1:

You should go through the following steps:

  1. Copy the skin you wish to use in your project. All built-in skins are installed in "C:\Program Files\Telerik\RadControls 'Prometheus' for ASPNET\Skins".For example, let's take the "Default" skin of RadSplitter.
  2. Open the CSS file of the skin (Splitter.Default.css) .
  3. Add the following classes:

    .RadSplitter_<used_skin> .pane div,  
    .RadSplitter_<used_skin> .paneHorizontal div  
    {  
        positionrelative;  
    }      
     


    In our example which is for the "Default" skin this should look like the following code:

    .RadSplitter_Default .pane div,  
    .RadSplitter_Default .paneHorizontal div  
    {  
        positionrelative;  
    }      
     
  4. Save the file and register it in your page. You can find more information how to do this here.
    In our particular example this should be done with the following code line:

    <link href="Splitter.Default.css" rel="stylesheet" type="text/css" runat="server"/>

  5. Set the Skin property of your RadSplitter to "Default". Then set the EnableEmbeddedSkins property to false.

    Note, that if you don't set EnableEmbeddedSkins to false RadSplitter will register its embedded version of Splitter.Default.css hence your modifications won't be applied. For more information you can check the How skins work and Skin registration topics.

    You can find more information about modifying built-in skins in our online documentation here.

Method2:

Method2 stays the same - you should apply the above registered CSS class to the RadPane in order to set its position to relative.

Comments

  • Shark75 , Jan 8, 2008

    This also applies to anything like a div that uses position: relative inside the RadPane. Very useful article. Thanks.

  • AndreaT , Feb 28, 2008

    I Have 2 splitters nested. Method 1 solved the issue but had one unexpected side-effect on the inner radpane: some rad controls on top of the pane get hidden after the page fully loaded Method 2 (had CssClass applied only to the inner radpane) solved the issue without glitches.

  • George , Jun 18, 2008

    Hi, I have tried your code. non of the method worked for me. Page loads perfectly then it stretched. Thanks.

  • Telerik Admin , Jul 9, 2008

    Please, note that the described problem is not related to this particular article and it does not contain any methods but only CSS settings. I suggest to try setting the RadSplitter's VisibleDuringInit property to false and in case this does not help, open a new support ticket and address the problem there.

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.