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

RadPageLayout Row/Columns

6 Answers 486 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
DogBizPro
Top achievements
Rank 1
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

Sort by
0
Magdalena
Telerik team
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.
0
DogBizPro
Top achievements
Rank 1
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">&#x25c4; 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">
                                                    &nbsp;
                                                </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">
                                                    &nbsp;
                                                </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>

0
Magdalena
Telerik team
answered on 14 Apr 2016, 08:44 AM
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.
0
DogBizPro
Top achievements
Rank 1
answered on 14 Apr 2016, 03:55 PM

I am able to recreate the issue using your example page and the master page we are using in our project. How do I send that to you?

It appears as though the issue is in the css we are using specifically the line-height. When I remove that things are fine.

div.b{border:solid 1px #eceef0;margin:0px;padding:10px;margin-top:5px;margin-bottom:15px;line-height:40px;}

 

 

0
Magdalena
Telerik team
answered on 15 Apr 2016, 07:23 AM
Hi Stephanie,

You can open a support ticket and there you will able to attach a sample.

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.
0
DogBizPro
Top achievements
Rank 1
answered on 15 Apr 2016, 01:17 PM
Thank you. Just submitted ticket #1027617.
Tags
PageLayout
Asked by
DogBizPro
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
DogBizPro
Top achievements
Rank 1
Share this question
or