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

[Solved] <asp:content> auto resize issue with Telerik controls

2 Answers 117 Views

General Discussions

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

Sucheta Patil asked on 27 Jul 2010, 03:10 PM

screen1.JPG

hi
When I run the below code I see the controls are not aligned.
I am using asp.net 3.5 with Telerik 2010.1.415.35 version.
I have attached a screen shot to explain it.
I can see that the <asp:content> do not autoresize after the controls come up.
How do I resolve this? It is urgent please!!!
I tried creating a new project and total new form,but the problem persists.
Can anyone Help me qquickly....
Thanks in advance.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SelfReferral.aspx.cs" Inherits="LearningSupport_SelfReferral"  MasterPageFile="~/StudentNet.master"%>

<%@ MasterType VirtualPath="~/StudentNet.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<h1>Self Referral for Additional Learning Support(ALS) 2010/2011</h1>

<asp:Panel ID="plForm" runat="server" >

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" IsSticky="true" Style="position: absolute;

top: 0; left: 0; height: 100%; width: 100%;">

</telerik:RadAjaxLoadingPanel>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab Value="Student" Text="Student" runat="server" PageViewID="RadPageViewStudent">

</telerik:RadTab>

<telerik:RadTab Value="Course" Text="Course" Enabled="False" runat="server" PageViewID="RadPageViewCourse">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

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

<telerik:RadPageView ID="RadPageViewStudent" runat="server" Selected = "true">

<ol>

<li>

<asp:Label ID="lbSearch" runat="server" Text="Enter Student Reference: " AssociatedControlID="txtSearch"> </asp:Label>

<telerik:RadTextBox ID="txtSearch" runat="server" >

</telerik:RadTextBox>

<asp:Button ID="btnSearch" runat="server" CausesValidation="true"

Text="Search" onclick="btnSearch_Click" />

<asp:RequiredFieldValidator ID="RFV_txtSearch" runat="server" ValidationGroup="ALS" ControlToValidate="txtSearch" ErrorMessage="Please enter Student Reference.">*</asp:RequiredFieldValidator>

<asp:Button ID="btnReset" runat="server" CausesValidation="true"

OnClick="btnReset_Click" Text="Reset" />

</li>

<li>

<asp:Label ID="lbStudName" runat="server" Text="Student Name: " AssociatedControlID="lstStudName">

</asp:Label>

<telerik:RadComboBox ID="lstStudName" runat="server" ShowToggleImage="false"

DataTextField="SName" DataValueField="SName" ReadOnly="true" Enabled="false"

AppendDataBoundItems="False"></telerik:RadComboBox>

</li><li></li><li>

<asp:Label ID="lbDOB" runat="server" Text="Date of Birth: " AssociatedControlID="lstDOB"> </asp:Label> <telerik:RadComboBox ID="lstDOB" runat="server" ShowToggleImage="false" Enabled="false"

DataTextField="DOB" DataValueField="DOB" DataTextFormatString="{0:d}"></telerik:RadComboBox>

</li><li></li>

<li>

<asp:Label ID="lbAge" runat="server" Text="Age: " AssociatedControlID="lstAge"> </asp:Label>

<telerik:RadComboBox ID="lstAge" runat="server" ShowToggleImage="false"

DataTextField="Age" DataValueField="Age" Enabled="false"></telerik:RadComboBox> years </li><li></li><li>

<asp:Label ID="Label2" runat="server" Text="Telephone: " AssociatedControlID="txtTel"> </asp:Label>

<telerik:RadNumericTextBox ID="txtTel" runat="server">

<NumberFormat DecimalDigits="0" GroupSeparator="" />

</telerik:RadNumericTextBox>

</li><li>

<asp:Label ID="Label3" runat="server" Text="Email Address: " AssociatedControlID="txtEmail"></asp:Label>

<telerik:RadTextBox ID="txtEmail" runat="server" ></telerik:RadTextBox>

<asp:RegularExpressionValidator id="emailValidator" runat="server" Display="Dynamic"

ErrorMessage="Please, enter valid e-mail address."

ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"

ControlToValidate="txtEmail" ValidationGroup="ALS">

</asp:RegularExpressionValidator>

</li>

<li></li><li>

<asp:Button ID="btnStudent" runat="server" CausesValidation="true" OnClick="btnStudent_Click"

Text="Next" ValidationGroup="Student" /></li>

<li>

<asp:LinqDataSource ID="LinqStudent" runat="server"

ContextTypeName="aaDataContext" TableName="STUDENTs">

</asp:LinqDataSource>

</li>

<li><asp:LinqDataSource ID="LinqTelDir" runat="server"

ContextTypeName="bbDataContext" TableName="tdlTel">

</asp:LinqDataSource>

</li>

</ol></telerik:RadPageView>

<telerik:RadPageView ID="RadPageView1" runat="server" Selected = "true"> <ol>

<li><asp:Label ID="lbCourseCode" runat="server" Text="Course Code: " AssociatedControlID="lstCourseCode"> </asp:Label><telerik:RadComboBox ID="lstCourseCode" runat="server" ShowToggleImage="true"

DataTextField="CourseCode" DataValueField="CourseCode" Enabled="true"></telerik:RadComboBox></li><li></li>

<li><asp:Label ID="lbCourseName" runat="server" Text="Course Name: " AssociatedControlID="lstCourseName"> </asp:Label><telerik:RadComboBox ID="lstCourseName" runat="server"

DataTextField="CourseName" DataValueField="CourseName" Enabled="true"></telerik:RadComboBox></li><li></li>

<li>

<asp:Label ID="lbSupport" runat="server" Text="<br/><br/>Other Support Needs: "

AssociatedControlID="chkSupportType" Height="81px" Width="300px"></asp:Label>

<asp:checkboxlist id="chkSupportType" runat="server" RepeatDirection="Horizontal"

RepeatColumns="2" Height="80px" Width="450px" AutoPostBack="True"

onselectedindexchanged="chkSupportType_SelectedIndexChanged">

<asp:listitem id="chkMedCondn" runat="server" value="Medical Condition" Text="Medical Condition"/> <asp:listitem id="chkSupport" runat="server" Selected ="True" value="Support" Text="Statement of Educational Need"/>

<asp:listitem id="chkDyscalculia" runat="server" value="Dyscalculia/Dyspraxia" Text="Dyscalculia/Dyspraxia"/>

<asp:listitem id="chkDyslexia" runat="server" value="Dyslexia" Text="Dyslexia"/>

<asp:listitem id="chkDisability" runat="server" value="Disability" Text="Disability (please state if known)"/>

<asp:listitem id="chkNone" runat="server" value="None" Text="None"/>

</asp:checkboxlist>

</li>

<li><asp:Label ID="lbOtherDisbility" runat="server" Text="Please specify Other Disability:" AssociatedControlID="txtODisability"></asp:Label>

<asp:TextBox ID="txtODisability" runat="server" TextMode="MultiLine" Enabled="false" Height="38px" Width="321px"></asp:TextBox>

<asp:RequiredFieldValidator ID="RFV_txtODisability" ControlToValidate="txtODisability" Enabled="false" ValidationGroup="ALS" runat="server" ErrorMessage="Please specify Other Disability.">*</asp:RequiredFieldValidator> </li>

<li>

<asp:Label ID="lbcomments" runat="server" Text="Comments:" AssociatedControlID="txtComments"></asp:Label>

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Height="70px" Width="300px"></asp:TextBox>

<asp:RequiredFieldValidator ID="RFV_Comments" ControlToValidate="txtComments" ValidationGroup="ALS" runat="server" ErrorMessage="Please enter Comments">*</asp:RequiredFieldValidator>

</li>

<li>

<asp:Label ID="Label1" runat="server" Text="Date:" AssociatedControlID="txtDate"></asp:Label>

<telerik:RadDatePicker ID="txtDate" runat="server" Enabled="false">

</telerik:RadDatePicker>

</li>

<li><asp:Label ID="lbFormCompletedBy" runat="server" Text="Email address of person filling in this form:" AssociatedControlID="lstFormCompletedBy" Width="300px" Height="48px" ForeColor="#FFFFCC"></asp:Label>

<telerik:RadComboBox ID="lstFormCompletedBy" runat="server" ReadOnly="true" Enabled="False" DataTextField ="Email" DataValueField="Email" ForeColor="#FFFFCC"></telerik:RadComboBox>

</li>

</ol>

<p><asp:label id="message" runat="server" /></p>

<p>

Please check this form for accuracy before submitting as changes are time consuming!<br />

These forms are sent to Disability Support and Administration Services.

Your referral details will be treated in the strictest confidence.<br />

Thankyou.

<asp:Label ID="lbUserName" runat="server"></asp:Label></p><br />

<asp:Label ID="lbError" runat="server" CssClass="message" Visible="false"></asp:Label>

<asp:ValidationSummary runat="server" ID="validationSummary3" ValidationGroup="ALS" />

<p>

<asp:Button ID="btSubmit" runat="server" CausesValidation="true"

OnClick="btSubmit_Click" Text="Submit" ValidationGroup="ALS" />

</p>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

<asp:Panel ID="plConfirm" runat="server" Visible="false">

<p>

You have successfully completed the Self Referral for Additional Learning Support form, a confirmation

e-mail containing the details you have entered has been sent to Anne Sheeran.

</p>

<p>

For any questions or comments regarding this form please contact <a href="abc@abc.ac.uk">

Online services </a>

</p>

</asp:Panel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="False">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="txtSearch">

<UpdatedControls>

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstStudName" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstDOB" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstAge" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstCourseCode" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstCourseName" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</asp:Content>

2 Answers, 1 is accepted

Accepted

answered on 30 Jul 2010, 12:26 PM

Hello Sucheta Patil,

First of all, you seem to have custom CSS styles on your page, which spoil the RadControls (e.g. RadTabStrip) layout. Please check this with Firebug and make the necessary corrections to your styles.

Then, also check whether you have placed the content inside a container with fixed width and/or height.

Finally, the ajaxified inline controls should have UpdatePanelRenderMode set to "Inline" in the AjaxSettings.

Here is a page, which looks better. Please compare with your implementation.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

</head>

<body>

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

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

<h1>Self Referral for Additional Learning Support(ALS) 2010/2011</h1>

<asp:Panel ID="plForm" runat="server" >

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" IsSticky="true" Style="position: absolute;

top: 0; left: 0; height: 100%; width: 100%;">

</telerik:RadAjaxLoadingPanel>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab Value="Student" Text="Student" runat="server" PageViewID="RadPageViewStudent">

</telerik:RadTab>

<telerik:RadTab Value="Course" Text="Course" Enabled="False" runat="server" PageViewID="RadPageViewCourse">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

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

<telerik:RadPageView ID="RadPageViewStudent" runat="server" Selected="true">

<ol>

<li>

<asp:Label ID="lbSearch" runat="server" Text="Enter Student Reference: " AssociatedControlID="txtSearch"> </asp:Label>

<telerik:RadTextBox ID="txtSearch" runat="server" >

</telerik:RadTextBox>

<asp:Button ID="btnSearch" runat="server" CausesValidation="true"

Text="Search" />

<asp:Button ID="btnReset" runat="server" CausesValidation="true"

Text="Reset" />

</li>

<li>

<asp:Label ID="lbStudName" runat="server" Text="Student Name: " AssociatedControlID="lstStudName">

</asp:Label>

<telerik:RadComboBox ID="lstStudName" runat="server" ShowToggleImage="false"

DataTextField="SName" DataValueField="SName" ReadOnly="true" Enabled="false"

AppendDataBoundItems="False"></telerik:RadComboBox>

</li><li></li><li>

DataTextField="DOB" DataValueField="DOB" DataTextFormatString="{0:d}"></telerik:RadComboBox>

</li><li></li>

<li>

<asp:Label ID="lbAge" runat="server" Text="Age: " AssociatedControlID="lstAge"> </asp:Label>

<telerik:RadComboBox ID="lstAge" runat="server" ShowToggleImage="false"

DataTextField="Age" DataValueField="Age" Enabled="false"></telerik:RadComboBox> years </li><li></li><li>

<asp:Label ID="Label2" runat="server" Text="Telephone: " AssociatedControlID="txtTel"> </asp:Label>

<telerik:RadNumericTextBox ID="txtTel" runat="server">

<NumberFormat DecimalDigits="0" GroupSeparator="" />

</telerik:RadNumericTextBox>

</li><li>

<asp:Label ID="Label3" runat="server" Text="Email Address: " AssociatedControlID="txtEmail"></asp:Label>

<telerik:RadTextBox ID="txtEmail" runat="server" ></telerik:RadTextBox>

<asp:RegularExpressionValidator id="emailValidator" runat="server" Display="Dynamic"

ErrorMessage="Please, enter valid e-mail address."

ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"

ControlToValidate="txtEmail" ValidationGroup="ALS">

</asp:RegularExpressionValidator>

</li>

<li></li><li>

<asp:Button ID="btnStudent" runat="server" CausesValidation="true"

Text="Next" ValidationGroup="Student" /></li>

<li>

</li>

<li>

</li>

</ol></telerik:RadPageView>

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

DataTextField="CourseCode" DataValueField="CourseCode" Enabled="true"></telerik:RadComboBox></li><li></li>

<li><asp:Label ID="lbCourseName" runat="server" Text="Course Name: " AssociatedControlID="lstCourseName"> </asp:Label><telerik:RadComboBox ID="lstCourseName" runat="server"

DataTextField="CourseName" DataValueField="CourseName" Enabled="true"></telerik:RadComboBox></li><li></li>

<li>

<asp:Label ID="lbSupport" runat="server" Text="<br/><br/>Other Support Needs: "

AssociatedControlID="chkSupportType" Height="81px" Width="300px"></asp:Label>

<asp:checkboxlist id="chkSupportType" runat="server" RepeatDirection="Horizontal"

RepeatColumns="2" Height="80px" Width="450px" AutoPostBack="True"

>

<asp:listitem id="chkDyscalculia" runat="server" value="Dyscalculia/Dyspraxia" Text="Dyscalculia/Dyspraxia"/>

<asp:listitem id="chkDyslexia" runat="server" value="Dyslexia" Text="Dyslexia"/>

<asp:listitem id="chkDisability" runat="server" value="Disability" Text="Disability (please state if known)"/>

<asp:listitem id="chkNone" runat="server" value="None" Text="None"/>

</asp:checkboxlist>

</li>

<li><asp:Label ID="lbOtherDisbility" runat="server" Text="Please specify Other Disability:" AssociatedControlID="txtODisability"></asp:Label>

<asp:TextBox ID="txtODisability" runat="server" TextMode="MultiLine" Enabled="false" Height="38px" Width="321px"></asp:TextBox>

<li>

<asp:Label ID="lbcomments" runat="server" Text="Comments:" AssociatedControlID="txtComments"></asp:Label>

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Height="70px" Width="300px"></asp:TextBox>

<asp:RequiredFieldValidator ID="RFV_Comments" ControlToValidate="txtComments" ValidationGroup="ALS" runat="server" ErrorMessage="Please enter Comments">*</asp:RequiredFieldValidator>

</li>

<li>

<asp:Label ID="Label1" runat="server" Text="Date:" AssociatedControlID="txtDate"></asp:Label>

<telerik:RadDatePicker ID="txtDate" runat="server" Enabled="false">

</telerik:RadDatePicker>

</li>

<telerik:RadComboBox ID="lstFormCompletedBy" runat="server" ReadOnly="true" Enabled="False" DataTextField ="Email" DataValueField="Email" ForeColor="#FFFFCC"></telerik:RadComboBox>

</li>

</ol>

<p><asp:label id="message" runat="server" /></p>

<p>

Please check this form for accuracy before submitting as changes are time consuming!<br />

These forms are sent to Disability Support and Administration Services.

Your referral details will be treated in the strictest confidence.<br />

Thankyou.

<asp:Label ID="lbUserName" runat="server"></asp:Label></p><br />

<asp:Label ID="lbError" runat="server" CssClass="message" Visible="false"></asp:Label>

<asp:ValidationSummary runat="server" ID="validationSummary3" ValidationGroup="ALS" />

<p>

<asp:Button ID="btSubmit" runat="server" CausesValidation="true"

Text="Submit" ValidationGroup="ALS" />

</p>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

<asp:Panel ID="plConfirm" runat="server" Visible="false">

<p>

You have successfully completed the Self Referral for Additional Learning Support form, a confirmation

e-mail containing the details you have entered has been sent to Anne Sheeran.

</p>

<p>

For any questions or comments regarding this form please contact <a href="abc@abc.ac.uk">

Online services </a>

</p>

</asp:Panel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="False">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="txtSearch">

<UpdatedControls>

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstStudName" UpdatePanelRenderMode="Inline" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstDOB" UpdatePanelRenderMode="Inline" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstAge" UpdatePanelRenderMode="Inline" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstCourseCode" UpdatePanelRenderMode="Inline" />

<telerik:AjaxUpdatedControl LoadingPanelID="LoadingPanel1" ControlID="lstCourseName" UpdatePanelRenderMode="Inline" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</form>

</body>

</html>

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

[Solved] &lt;asp:content&gt; auto resize issue with Telerik controls

2 Answers, 1 is accepted

[Solved] <asp:content> auto resize issue with Telerik controls