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

RadPageLayout Row/Columns

6 Answers 564 Views

PageLayout

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

DogBizPro asked on 10 Apr 2016, 09:55 PM

I have a question about the rows/columns. I am new to using this control. Shouldn't the columns wrap to the next row automatically at 12 columns?

For example:

I want something like the following in the medium layout. Currently the XL, LG, SM and XS look exactly the way I want them. It is just the medium that I have issues with.

Name: TEXTBOX

Allergies: TEXTBOX

Here is the code:

<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Name:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:Textbox runat="server" ID="txtName" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Allergies:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="6" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:TextBox runat="server" ID="txtAllergies" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>

I am getting something that looks like the following:

Name: TEXTBOX
Allergies:

TEXTBOX

I just cannot figure out how to get those side by side in the XL & LG but on 2 separate rows in the MD. Thanks for any help!

6 Answers, 1 is accepted

answered on 13 Apr 2016, 08:02 AM

Hi Stephanie,

Thank you for contacting Telerik support.

The snippet that you provided has missing the <telerik:RadPageLayout runat="server"> server wrapper tag. Make you sure, that this tag is not missing. When we added this tag, the behavior was correct. We are sending you this video for your reference. The following is the tested code:

<telerik:RadPageLayout runat="server">

<telerik:LayoutRow>

<Columns>

<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">

Name:

</telerik:LayoutColumn>

<telerik:LayoutColumn Span="4" SpanMd="10" SpanSm="12" SpanXs="12">

<asp:TextBox runat="server" ID="txtName" Width="90%" ReadOnly="true" />

</telerik:LayoutColumn>

<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">

Allergies:

</telerik:LayoutColumn>

<telerik:LayoutColumn Span="6" SpanMd="10" SpanSm="12" SpanXs="12">

<asp:TextBox runat="server" ID="txtAllergies" Width="90%" ReadOnly="true" />

</telerik:LayoutColumn>

</Columns>

</telerik:LayoutRow>

</telerik:RadPageLayout>

Regards,
Magdalena
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 13 Apr 2016, 01:55 PM

Thanks but I do have that in my code. The example is much more complex than I have included here, but I definitely have the RadPageLayout with the runat=server on it and things do not wrap in the way I would expect....

Here is the full layout code:

<telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="true" HtmlTag="None">
<telerik:LayoutRow RowType="Container">
<Rows>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:LayoutColumn Span="4" SpanXs="12">
<div style="float:left;text-align:left;height:30px;padding-top:7px;margin-left:-25px;">
<a href="Index.aspx" class="small">◄ Back to Dogs</a>
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="8" SpanXs="12">
<div style="float:right;color:#f00;" class="small">
<asp:UpdatePanel runat="server" ID="updAlerts" UpdateMode="Conditional">
<ContentTemplate>
<asp:Literal runat="server" ID="litInactive" Text="* Dog is inactive - " Visible="false" />
<asp:LinkButton runat="server" ID="lnbActivate" Text="Activate Dog" OnClick="lnbActivate_Click" />
<asp:Image runat="server" ID="imgVaccineAlert" ImageUrl="/Secure/Images/alert.png" Visible="false" ToolTip="This Dog has Expired Vaccinations" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div" CssClass="b">
<Rows>
<telerik:LayoutRow RowType="Container" WrapperHtmlTag="Div">
<Columns>
<telerik:CompositeLayoutColumn Span="10" SpanMd="12" SpanSm="12" SpanXs="12">
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="5" SpanMd="12" SpanSm="12" SpanXs="12">
<asp:UpdatePanel runat="server" ID="updPopUps">
<ContentTemplate>
<asp:HyperLink runat="server" ID="lnkOwner" ImageUrl="/Secure/Images/client.png" NavigateUrl='<%#Eval("NavUrl")%>' ToolTip="View Owner" />
<asp:HyperLink runat="server" ID="imbEdit" NavigateUrl="#" ImageUrl="/Secure/Images/edit.png" ToolTip="Edit Dog" />
<asp:HyperLink runat="server" ID="lnkPhoto" NavigateUrl="#" ImageUrl="/Secure/Images/photo-up.png" ToolTip="Dog Photo" />

<asp:HyperLink runat="server" ID="lnkAddReg" NavigateUrl="#" ImageUrl="/Secure/Images/add.png" ToolTip="Sign-up Dog for Class" />
<asp:HyperLink runat="server" ID="lnkAddDaycare" NavigateUrl="#" ImageUrl="/Secure/Images/add.png" ToolTip="Schedule Dog Daycare" />
<asp:HyperLink runat="server" ID="lnkAddTherapy" NavigateUrl="#" ImageUrl="/Secure/Images/add.png" ToolTip="Schedule Dog Therapy" />

<asp:HyperLink runat="server" ID="lnkEvent" NavigateUrl="#" ImageUrl="/Secure/Images/cal.png" ToolTip="Schedule Private Training" />
<asp:HyperLink runat="server" ID="lnkAddVaccine" NavigateUrl="#" ImageUrl="/Secure/Images/heart.png" ToolTip="Add Dog Vaccine" />
<asp:HyperLink runat="server" ID="lnkNote" NavigateUrl="#" ImageUrl="/Secure/Images/note.png" ToolTip="Add a Dog Note" />
<asp:HyperLink runat="server" ID="lnkMerge" NavigateUrl="#" ImageUrl="/Secure/Images/merge.png" ToolTip="Merge Dogs" />
<asp:HyperLink runat="server" ID="lnkPrint" NavigateUrl="#" ImageUrl="/Secure/Images/print.png" ToolTip="Print Dog Info" />
</ContentTemplate>
</asp:UpdatePanel>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Owner:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="6" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:Literal runat="server" ID="litOwner" Visible="false" />
<asp:Textbox runat="server" ID="txtOwner" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Name:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:Textbox runat="server" ID="txtName" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Allergies:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="6" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:TextBox runat="server" ID="txtAllergies" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Gender:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:Textbox runat="server" ID="txtGender" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
DOB:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:Textbox runat="server" ID="txtDOB" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" SpanMd="2" SpanSm="12" SpanXs="12">
Age/Year:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="12" SpanXs="12">
<asp:Textbox runat="server" ID="txtAge" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1" HiddenLg="true" HiddenSm="true" HiddenXs="true">
 
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1">
Breed:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="4">
<asp:Textbox runat="server" ID="txtBreed2" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="1">
Breed:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="6">
<asp:Textbox runat="server" ID="txtBreed1" Width="90%" ReadOnly="true" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow HiddenSm="true" HiddenXs="true">
<Columns>
<telerik:LayoutColumn Span="1">
Attends:
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="9">
<asp:CheckBoxList runat="server" ID="cblAttends" RepeatColumns="5" Enabled="false" Width="100%" />
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" HiddenMd="true" HiddenSm="true" HiddenLg="true">
 
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:CompositeLayoutColumn>
<telerik:LayoutColumn Span="2" HiddenMd="true" HiddenSm="true" HiddenXs="true">
<div style="width:150px;background-repeat:no-repeat;background-position:center;padding:0px;" runat="server" id="tdDog">
<asp:ImageButton runat="server" ID="imbDog" Width="150" Height="150" ImageUrl="/Secure/Images/no-photo.png" Visible="true" />
</div>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:LayoutRow>
</Rows>
</telerik:LayoutRow>
</telerik:RadPageLayout>

answered on 14 Apr 2016, 08:44 AM

wrappingIssue.zip

Hi Stephanie,

We have copied the provided code to a sample project, and have added styles for a red border when window size is medium. But the layout is the same as in the previous sample and it resizes properly. We are sending you this video as a part of the testing for your reference.

Could you please modify the tested project in the attachment so the issue will be reproduce, and send us the modified version in a new support ticket? Could you also specify what is the tested browser?

Regards,
Magdalena
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.