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

[Solved] Sliding pane adding margin to parent div

1 Answer 188 Views

Splitter

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

Basharat asked on 01 Mar 2013, 08:32 PM

wrong-sliding1.png

wrong-sliding-2.png

correct-sliding.png

correct-sliding-2.png

Hi,

I have a splitter, slidingzone and slidingpane combination implemented.
The first time client loads the site in browser and then the page on which this slider is placed, the sliding pane is not overlapping the div, rather its pushing it on the right, adding margin to it. At this time it flickers once and then disappears but the div doesnt comes back to original place.

If a single post back is done to the page it never happens again.
Please see the attached screenshots for the detailed scenario.

The code I am using for splitter and slidingzone is as follows:

<telerik:radsplitter id="RadSplitter1" runat="server" orientation="Vertical" height="230px"

borderstyle="None" borderwidth="0">

<telerik:RadPane ID="RadPane1" runat="server" Height="100%" BorderStyle="None" BorderWidth="0">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Height="100%" BorderStyle="None" ClickToOpen="true"

BorderWidth="0" Width="27px" >

<telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="460px" Title="Add Stakeholder"

EnableDock="false" Height="240px" EnableResize="false" MinHeight="200" MinWidth="350">

<div id="dvStakeholder">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td colspan="2" style="color: White;">

Add Stakeholder

</td>

</tr>

<tr>

<td colspan="2" style="height: 10px;">

</td>

</tr>

<tr>

<td class="innerTd">

Stakeholder Type

</td>

<td>

<telerik:RadComboBox ID="rcbStakeholderType" runat="server" AllowCustomText="True"

Width="265px" OnClientSelectedIndexChanged="HideShowByStakeholderType" OnClientLoad="HideShowByStakeholderType"

DataSourceID="LinqDataSource3" DataTextField="Type_Description" DataValueField="Type_ID">

</telerik:RadComboBox>

<asp:LinqDataSource ID="LinqDataSource3" runat="server" ContextTypeName="CategoryTypeDataContext"

EntityTypeName="" Select="new (Type_ID, Type_Description, Category_ID, Category, Company_ID)"

TableName="View_CategoryType_Lists" Where="Company_ID = @Company_ID AND Category_ID = @Category_ID">

<WhereParameters>

<asp:Parameter Name="Company_ID" />

<asp:Parameter Name="Category_ID" />

</WhereParameters>

</asp:LinqDataSource>

</td>

</tr>

<tr id="trFirstName">

<td class="innerTd">

First Name

</td>

<td>

<telerik:RadTextBox ID="txtFirstName" runat="server" MaxLength="50" Width="260px" EmptyMessage="Maximum 50 Characters" EmptyMessageStyle-Font-Italic="true"></telerik:RadTextBox>

</td>

</tr>

<tr id="trLastName">

<td class="innerTd">

Last Name

</td>

<td>

<telerik:RadTextBox ID="txtLastName" runat="server" MaxLength="50" Width="260px" EmptyMessage="Maximum 50 Characters" EmptyMessageStyle-Font-Italic="true"></telerik:RadTextBox>

</td>

</tr>

<tr id="trName" style="display: none;">

<td class="innerTd">

Name

</td>

<td>

<telerik:RadTextBox ID="txtName" runat="server" Width="260px" MaxLength="50" EmptyMessage="Maximum 50 Characters" EmptyMessageStyle-Font-Italic="true">

</telerik:RadTextBox>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr id="trGroupCategory" style="display: none;">

<td class="innerTd">

Group Category

</td>

<td>

<telerik:RadComboBox ID="rcbGroupCategory" runat="server" AllowCustomText="True"

Width="265px" Height="160px">

</telerik:RadComboBox>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="innerTd">

Parent

</td>

<td>

<telerik:RadComboBox ID="rcbParentStakeholder" runat="server" DataMember="DefaultView"

CloseDropDownOnBlur="true" DataTextField="StakeholderRelationship" DataValueField="Stakeholder_ID"

Height="160px" Width="265px" EmptyMessage="Enter Stakeholder Name and Press Enter" AllowCustomText="true"

DropDownWidth="265px" OnClientKeyPressing="OnKeyPressGetParentStakeholder"

OnClientDropDownClosing="onClientClosing" OnClientBlur="onClientBlur" LoadingMessage="Loading.." MarkFirstMatch="true" >

</telerik:RadComboBox>

<%--<asp:LinqDataSource ID="LinqDataSource2" runat="server" ContextTypeName="StakeholderDataContext"

EntityTypeName="" Select="new (StakeholderRelationship, Stakeholder_ID)" TableName="View_Stakeholder_Search_Lists">

</asp:LinqDataSource>--%>

</td>

</tr>

<tr>

<td class="innerTd">

Title

</td>

<td>

<telerik:RadTextBox ID="txtTitle" runat="server" Width="260px" MaxLength="200" EmptyMessage="Maximum 200 Characters" EmptyMessageStyle-Font-Italic="true"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td colspan="2">

</td>

</tr>

<tr>

<td colspan="2" align="right">

<asp:Button ID="btnSaveStakeholder" runat="server" Text="Save" OnClientClick="CollapsePane();" />

<asp:Button ID="btnCancelStakeholder" runat="server" Text="Cancel" OnClientClick="CollapsePane();" />

</td>

</tr>

</table>

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadPane ID="Radpane2" runat="server" Width="96%" Height="100%" BorderStyle="None" BorderWidth="0">

</telerik:RadPane>

</telerik:radsplitter>

1 Answer, 1 is accepted

answered on 06 Mar 2013, 03:15 PM

Hi Basharat,

Thank you for the provided cde - unfortunately it was not enough for me to reproduce the issue on my side.

Nevertheless, we are aware of a similar behavior, connected with the sliding panes with sizes set in pixels. The issue could be observed when the size is bigger than the maximum size the SlidingPane could occupy. By design the SlidingPanes are not supposed to exceed their parent Splitter's size. You could see what is the maximum expected width of the RadSliding panes if you simply set their height to 100%. A way to force such behavior is (e.g.) to dock the sliding pane.

The only workaround I could suggest you in such a situation is to recalculate the size of the expanded pane when the SlidingPane is collapsed:

$find("<%= Radpane2.ClientID %>").set_width(650);

Otherwise you could set the SlidingPanes's width to 100% and everything should work well.

If this does not help in solving the case, I will ask you to prepare a sample fully runnable project reproducing the issue, so we could examine it locally.

All the best,
Vesi
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.