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

Tab rendering issue

4 Answers 122 Views

TabStrip

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

Bernard Myers asked on 09 Nov 2010, 01:10 PM

unselectedtab.gif

selectedtab.gif

Windows 7 x64, VS 2008, ASP.Net AJAX v 2010.2.826.35.

I have a page with number of multiline RadTextBoxes with ResizableContolExtenders to allow the height of the box to be increased and everything works as expected.

I'm trying to split the page into 3 tabs with 3 RadMultiPage panels and now have an issue with my ajax resizablecontrol extender location.

The resizing handle only appears in the correct place on the initially selected tab, on the unselected tab it appears in the wrong place - see images.

If I change the selected Index to 1 the 2nd tab displays correctly and the 1st tab one does not. As soon as I click the resize image it jumps to where it should be and it stays in the correct place as I move between tabs.

<asp:Panel ID="Pan_dataName" runat="server" Width="420" Height="32" ScrollBars="None"><telerik:RadTextBox runat="server" ID="dataName" Text=

'<%# Bind("Name") %>' TextMode="MultiLine" MaxLength="300" Width="420" ToolTip="" /></asp:Panel><ajaxToolkit:ResizableControlExtender ID="rce_dataName" runat="server" TargetControlID="Pan_dataName" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="420" MinimumHeight="32" MaximumWidth="420" MaximumHeight="250" HandleOffsetX="4" HandleOffsetY="6" OnClientResizing="ResizeRadTextBox" /><br />

The handle image is identified in the CSS, position is theoretically taken care of by the control itself.

#copy .handleText

{

width:16px;

height:16px;

background-image:url(../../Images/HandleGrip.gif);

overflow:hidden;

cursor:se-resize;

}

Unusually it isn't an IE issue as the same happens in Firefox.

Any ides how I can get it to draw the tabs correctly?

B

4 Answers, 1 is accepted

answered on 12 Nov 2010, 02:20 PM

handlegrip.gif

Here's a standalone page with tab 2 selected. When you select tab one the image is in the wrong place. If you set the tab/multipage view to index 0 then tab 1 works tab 2 doesn't.

It appears that only the initially selected MultipageIndex renders correctly. If you click on the image it reverts to the correct place even though I haven't included any of the javascript that does the actual resizing.

I'm now using 2010.2.1109.35.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.handleText

{

width:16px;

height:16px;

background-image:url(~/../Images/HandleGrip.gif);

overflow:hidden;

cursor:se-resize;

}

</style>

</head>

<body>

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

<div>

<telerik:RadScriptManager ID="scriptmanager1" EnablePartialRendering="true" runat="Server" />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Default" MultiPageID="RadMultiPage1" SelectedIndex="1" ShowBaseLine="true" Visible="true" >

<Tabs>

<telerik:RadTab Text="Tab 1" />

<telerik:RadTab Text="Tab 2" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="1" >

<telerik:RadPageView ID="RadPageView1" runat="server">

<table border="0" cellpadding="3" cellspacing="1" style="margin-top: 10px">

<tr>

<td width="200px" valign="top" align="right">

<asp:Label ID="lbldataName" runat="server" CssClass="labels" Text="Name" AssociatedControlID="dataName" />

</td>

<td width="20px">

</td>

<td>

<asp:Panel ID="Pan_dataName" runat="server" Width="420" Height="32" ScrollBars="None"><telerik:RadTextBox runat="server" ID="dataName" Text='' TextMode="MultiLine" MaxLength="300" Width="420" ToolTip="" /></asp:Panel><ajaxToolkit:ResizableControlExtender ID="rce_dataName" runat="server" TargetControlID="Pan_dataName" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="420" MinimumHeight="32" MaximumWidth="420" MaximumHeight="250" HandleOffsetX="4" HandleOffsetY="6" /><br />

</td>

</tr>

</table>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server" >

<table border="0" cellpadding="3" cellspacing="1" style="margin-top: 10px">

<tr>

<td width="200px" valign="top" align="right">

<asp:Label ID="lbldataName2" runat="server" CssClass="labels" Text="Name" AssociatedControlID="dataName2" />

</td>

<td width="20px">

</td>

<td>

<asp:Panel ID="Pan_dataName2" runat="server" Width="420" Height="32" ScrollBars="None"><telerik:RadTextBox runat="server" ID="dataName2" Text='' TextMode="MultiLine" MaxLength="300" Width="420" ToolTip="" /></asp:Panel><ajaxToolkit:ResizableControlExtender ID="rce_dataName2" runat="server" TargetControlID="Pan_dataName2" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="420" MinimumHeight="32" MaximumWidth="420" MaximumHeight="250" HandleOffsetX="4" HandleOffsetY="6" /><br />

</td>

</tr>

</table>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</form>

</body>

</html>

answered on 17 Nov 2010, 05:20 PM

test.zip

Hi Bernard,

I've attached the modified page with this issue fixed, please download it and give it a try.

Best regards,
Yana
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.