|
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:
- 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.
- Open the CSS file of the skin (Splitter.Default.css) .
- Add the following classes:
| .RadSplitter_<used_skin> .pane div, |
| .RadSplitter_<used_skin> .paneHorizontal div |
| { |
| position: relative; |
| } |
| |
In our example which is for the "Default" skin this should look like the following code:
| .RadSplitter_Default .pane div, |
| .RadSplitter_Default .paneHorizontal div |
| { |
| position: relative; |
| } |
| |
- 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"/>
- 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.
Please
Sign In
to rate this article.