This is a migrated thread and some comments may be shown as answers.

Sliding Panel with DIV

3 Answers 81 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Francois
Top achievements
Rank 1
Francois asked on 21 Oct 2008, 06:28 PM
Hi,
my Sliding Pane position get all messed up after I undocked it.  Probably cause by my DIV.  Here's a sample of my code:

 

 

 

<telerik:RadSplitter id="MainSplitter" runat="server" width="700" height="500" Skin="Inox" >

 

 

 

 

 

<div style="position:relative;top:100px;left:15px;" >

 

 

 

 

 

<telerik:RadPane id="LeftPane" runat="server" width="22" scrolling="none" >

 

 

 

 

 

<telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22">

 

 

 

 

 

<telerik:RadSlidingPane CssClass="ApplyPosition" id="RadSlidingPane1" title="Menu" runat="server" width="150">

 

 

 

 

 

 

 

<!-- Place the content of the pane here -->

 

 

<table border="0" cellspacing="0" cellpadding="5" style="width:100%">

 

 

 

 

 

 

<tr>

 

 

 

 

 

<td>

 

 

 

 

 

<telerik:RadToolBar ID="RadToolBar1" Runat="server" Height="20px"

 

 

 

 

 

onbuttonclick="RadToolBar1_ButtonClick" Skin="Telerik" OnClientButtonClicked="OnClientButtonClicked">

 

 

 

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

 

 

 

<Items>

 

 

 

 

 

<telerik:RadToolBarButton runat="server" CommandName="Act" Text="Actualiser" ImageUrl="~/images/prorogation.gif" ></telerik:RadToolBarButton>

 

 

 

 

 

<telerik:RadToolBarButton runat="server" CommandName="RA" Text="Risk Analyst" Target="_parent" NavigateUrl="http://srvdweb02/riskanalyst/" ImageUrl="~/images/RA.jpg" ></telerik:RadToolBarButton>

 

 

 

 

 

 

</Items>

 

 

 

 

 

</telerik:RadToolBar>

 

 

 

 

 

</td>

 

 

 

 

 

</tr>

 

 

 

 

 

<tr>

 

 

 

 

 

<td style="height: 5px">

 

 

 

 

 

<telerik:RadTreeView

 

 

ID="RadTreeView1"

 

 

runat="server"

 

 

 

 

 

OnClientNodeClicking="onNodeClicking"

 

 

 

 

 

Skin="Sunset" >

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Dossiers" ImageUrl="~/images/folders.gif" NavigateUrl="~/Forms/Base/frmHome.aspx" Selected="true">

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Nouveau" value="NouveauDossier" ImageUrl="~/images/add2.gif" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Ouvrir" ImageUrl="~/images/icon_open.gif" NavigateUrl="frmRechDossier.aspx" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="FW08001 - Gestion Planeta" Value="Scenario1" Font-Bold="true" NavigateUrl="~/frmDossier.aspx" ImageUrl="~/images/folders.gif" Visible="false">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Interventions" Value="Intervention1" ImageUrl="~/images/move.gif">

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Nouvelle intervention" ImageUrl="~/images/add2.gif" Value="NouvelleIntervention" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Nouveau prˆt(Brouillon)" ImageUrl="~/images/pret.gif" NavigateUrl="frmIntervention.aspx" >

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Emprunteurs" ImageUrl="~/images/emprunteur.gif" NavigateUrl="~/frmEmprunteurPortefeuille.aspx">

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Gestion Planeta soci‚t‚ en commandite(100%)" ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx" />

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Propri‚t‚s" ImageUrl="~/images/house_icon.gif" >

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" value="Scenario1v1" Text="2120 Sherbrooke Est, Montreal" ImageUrl="~/images/house_icon.gif" NavigateUrl="frmPropriete.aspx" />

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="FW08002 - Ridgewood" Value="Scenario2" visible="false" Font-Bold="true" NavigateUrl="~/frmDossier.aspx" ImageUrl="~/images/folders.gif">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Interventions" ImageUrl="~/images/move.gif">

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Nouvelle intervention" ImageUrl="~/images/add2.gif" Value="NouvelleIntervention"/>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Nouveau prˆt (Approuv‚)" ImageUrl="~/images/pret.gif" NavigateUrl="frmIntervention.aspx">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Emprunteurs"

 

 

ImageUrl="~/images/emprunteur.gif"

 

 

NavigateUrl="~/frmEmprunteurPortefeuille.aspx">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="SEC Ridgewood"

 

 

ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx">

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

<telerik:RadTreeNode runat="server" ImageUrl="~/images/house_icon.gif"

 

 

Text="Propri‚t‚s">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" ImageUrl="~/images/house_icon.gif"

 

 

NavigateUrl="frmPropriete.aspx" Text="3465-75, Ridgewood, Montr‚al" Value="Scenario2np">

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

<telerik:RadTreeNode runat="server" Value="Scenario2refin" Text="Refinancement (Brouillon)" visible="false" ImageUrl="~/images/revisionFin.gif" NavigateUrl="frmIntervention.aspx">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Emprunteurs" ImageUrl="~/images/emprunteur.gif" NavigateUrl="~/frmEmprunteurPortefeuille.aspx">

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="Capital BLF inc." ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx" />

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Propri‚t‚s" ImageUrl="~/images/house_icon.gif">

 

 

 

 

 

<Nodes>

 

 

<telerik:RadTreeNode runat="server" Text="3465-75, Ridgewood, Montr‚al" ImageUrl="~/images/house_icon.gif" NavigateUrl="frmPropriete.aspx" />

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Emprunteurs" ImageUrl="~/images/emprunteur.gif">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Nouveau" ImageUrl="~/images/add2.gif" Value="NouveauEmprunteur" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Ouvrir" ImageUrl="~/images/icon_open.gif" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Capital BLF inc." ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx"></telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Di Lilo" ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx"></telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Gestion Planeta soci‚t‚ en commandite" ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx"></telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="James Bond" ImageUrl="~/images/emprunteur.gif" NavigateUrl="frmEmprunteur.aspx"></telerik:RadTreeNode>

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Propri‚t‚s" ImageUrl="~/images/house_icon.gif">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Ouvrir" ImageUrl="~/images/icon_open.gif" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="2120 Sherbrooke Est Montreal" ImageUrl="~/images/house_icon.gif" NavigateUrl="frmPropriete.aspx" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="3465-75 Ridgewood, Montreal" ImageUrl="~/images/house_icon.gif" NavigateUrl="frmPropriete.aspx" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="845-65 de Maisonneuve Montreal" ImageUrl="~/images/house_icon.gif" NavigateUrl="frmPropriete.aspx" />

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="1570-80 St-Timoth‚e Montreal" ImageUrl="~/images/house_icon.gif" NavigateUrl="frmPropriete.aspx" />

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Administration" ImageUrl="~/images/12administrativeTools.gif">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Tables ParamŠtres">

 

 

 

 

 

<Nodes>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Utilisateurs" NavigateUrl="~/Forms/AdminFamily/frmUser.aspx" ImageUrl="~/images/user.gif" >

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

<telerik:RadTreeNode runat="server" Text="Devises" ImageUrl="~/images/currency.gif">

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

</Nodes>

 

 

 

 

 

</telerik:RadTreeNode>

 

 

 

 

 

</Nodes>

 

 

</telerik:RadTreeNode>

 

 

</Nodes>

 

 

 

 

 

<CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation>

 

 

 

 

 

<ExpandAnimation Duration="100"></ExpandAnimation>

 

 

 

 

 

</telerik:RadTreeView>

 

 

 

 

 

</td>

 

 

 

 

 

</tr>

 

 

 

 

 

</table>

 

 

 

 

 

 

 

 

</telerik:RadSlidingPane>

 

 

 

 

 

 

</telerik:RadSlidingZone>

 

 

 

 

 

</telerik:RadPane>

 

3 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 22 Oct 2008, 02:20 PM
Hi Francois,

As far as I can see from your code, you have a DIV element directly placed in a RadSplitter control. Please, note, that this setup is invalid and the direct nested elements of the RadSplitter can be only RadPane and RadSplitBar. In case the DIV is nested in a RadPane or RadSlidingPane and has relative positioning, you should apply relative position to the parent RadPane/RadSlidingPane, too by assigning their CSSClass property to a proper CSS class which sets relative position as explained in this KB article.

In case this does not help, please provide more detailed explanation of the desired layout, the actual position of the DIV and why do you need it there. It will be best if you open a new support ticket and send us a sample, fully working reproduction demo along with reproduction steps if the problem is really directly related to RadControls and they are properly used (the scenario DIV directly in a RadSplitter is invalid).

Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Francois
Top achievements
Rank 1
answered on 23 Oct 2008, 03:04 PM
Hi,
first of all, thanks for your quick reply.
Below is the code to reproduce the problem.  In my case, the <div> tag is use to put a menu in top of the splitter (top:100px).

<

html xmlns="http://www.w3.org/1999/xhtml" >
<
head runat="server">
<style>

 

.RelativePosition

{

 

position:relative;

 

}

</

style>

 

<

body>

 

 

<form id="form1" runat="server">

 

 

 

<asp:ScriptManager runat="server" ID="scriptManager1"></asp:ScriptManager>

 

 

<div style="position:relative; top:100px">

 

 

<telerik:RadSplitter CssClass="RelativePosition" id="MainSplitter" runat="server" width="700" height="500" Skin="Inox" >

 

 

<telerik:RadPane id="LeftPane" runat="server" width="22" scrolling="none" >

 

 

<telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22">

 

 

<telerik:RadSlidingPane id="RadSlidingPane1" title="Menu" runat="server" width="150">

 

 

</telerik:RadSlidingPane>

 

 

</telerik:RadSlidingZone>

 

 

</telerik:RadPane>

 

 

</telerik:RadSplitter>

 

 

</div>

 

 

</form>

 

</

body>

 

</

html>

 

0
Svetlina Anati
Telerik team
answered on 27 Oct 2008, 10:51 AM
Hello Francois,

I tested the provided code but you did not provide the content of the RadSlidingPane - I placed a DIV element in it for test purposes but the DIV did not get messed up. Please try setting the CSS class not to the RadSplitter as you have done but to the RadSlidingPane control.

In case you need further assistance, please modify the attached test project in order to reproduce the problem, open a new support ticket and send it to me along with some screenshots of the desired and actual beavior and detailed reproduction instruction. The demo should be fully runnable and does not have to be complicated - include just the minimal needed contriols for reproduction. Once I receive it, I will do my best to help.

Greetings,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Splitter
Asked by
Francois
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Francois
Top achievements
Rank 1
Share this question
or