RadPageLayout Row/Columns

7 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 10 Apr Link to this post

    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!

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 13 Apr Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 13 Apr in reply to Magdalena Link to this post

    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>

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 14 Apr Link to this post

    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.
  6. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 14 Apr Link to this post

    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;}

     

     

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 15 Apr Link to this post

    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.
  8. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 15 Apr in reply to Magdalena Link to this post

    Thank you. Just submitted ticket #1027617.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017