RadPageLayout - Alignment of Columns and Space between Rows

3 posts, 0 answers
  1. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 26 Jul Link to this post

    Currently, I am working on developing an ASP.Net page with VB.Net code-behind.  This new page is being designed using the RadPageLayout because it needs to have a good layout on Desktop PCs and Mobile devices

    Right now I am having a problem of getting the columns to be all the way over to the left with only slight padding on the left when being displayed on a Desktop PC at 1920 x 1080 resolution.  But it looks good on the iPhone 6S.  I need it to look good on all devices.

    Also I need help creating some space between the rows.  On the Desktop PC, the RadComboBoxes are right next to each other from 1 row to the next.

    Please help!  Thanks!

    Here is the code for the ASP.Net page:

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Android Store</title>
        <style type="text/css">
            .comboboxlabel {
                color: white;
            }
            body {
                margin: 0;
                padding: 0;
            }
            html {
                font-size: 170%;
            }
            @media (min-width:60em){
                html {
                    font-size: 90%
                }

            }
        </style>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    </head>
    <body style="background-color: #3A4459">
        <form id="form1" runat="server">

            <telerik:RadScriptManager runat="server" />

            <div>
            <telerik:RadPageLayout ID="Radpagelayout1" runat="server" GridType="Fluid" ForeColor="White" ShowGrid="true">
                <Rows>
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn Span="1" SpanMd="1" SpanSm="10">
                                    Bay
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="10">
                                <telerik:RadComboBox ID="rcbbBay" runat="server" MaxHeight="250px" AutoPostBack="true" Width="170px" RenderMode="Lightweight">
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Text="A - Bay" Value="A - Bay" />
                                        <telerik:RadComboBoxItem runat="server" Text="B - Bay" Value="B - Bay" />
                                        <telerik:RadComboBoxItem runat="server" Text="C - Bay" Value="C - Bay" />
                                        <telerik:RadComboBoxItem runat="server" Text="D - Bay" Value="D - Bay" />
                                        <telerik:RadComboBoxItem runat="server" Text="E - Bay" Value="E - Bay" />
                                        <telerik:RadComboBoxItem runat="server" Text="F - Bay" Value="F - Bay" />
                                        <telerik:RadComboBoxItem runat="server" Text="G - Bay" Value="G - Bay" />
                                    </Items>
                                </telerik:RadComboBox>
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn Span="1" SpanMd="1" SpanSm="10">
                                    Column
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="10">
                                <telerik:RadComboBox ID="rcbbCol1" runat="server" MaxHeight="250px" Width="170px" RenderMode="Lightweight">
                                </telerik:RadComboBox>
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn Span="1" SpanMd="1" SpanSm="10">
                                    Row
                            </telerik:LayoutColumn>
                            <telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="10">
                                <telerik:RadComboBox ID="rcbbRow1" runat="server" MaxHeight="250px" Width="170px" RenderMode="Lightweight">
                                    <Items>
                                        <telerik:RadComboBoxItem runat="server" Text="01" Value="01" />
                                        <telerik:RadComboBoxItem runat="server" Text="02" Value="02" />
                                        <telerik:RadComboBoxItem runat="server" Text="03" Value="03" />
                                        <telerik:RadComboBoxItem runat="server" Text="04" Value="04" />
                                        <telerik:RadComboBoxItem runat="server" Text="05" Value="05" />
                                        <telerik:RadComboBoxItem runat="server" Text="06" Value="06" />
                                        <telerik:RadComboBoxItem runat="server" Text="07" Value="07" />
                                        <telerik:RadComboBoxItem runat="server" Text="08" Value="08" />
                                        <telerik:RadComboBoxItem runat="server" Text="09" Value="09" />
                                        <telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
                                        <telerik:RadComboBoxItem runat="server" Text="11" Value="11" />
                                        <telerik:RadComboBoxItem runat="server" Text="12" Value="12" />
                                        <telerik:RadComboBoxItem runat="server" Text="13" Value="13" />
                                        <telerik:RadComboBoxItem runat="server" Text="14" Value="14" />
                                        <telerik:RadComboBoxItem runat="server" Text="15" Value="15" />
                                        <telerik:RadComboBoxItem runat="server" Text="16" Value="16" />
                                        <telerik:RadComboBoxItem runat="server" Text="17" Value="17" />
                                        <telerik:RadComboBoxItem runat="server" Text="18" Value="18" />
                                        <telerik:RadComboBoxItem runat="server" Text="19" Value="19" />
                                        <telerik:RadComboBoxItem runat="server" Text="20" Value="20" />
                                        <telerik:RadComboBoxItem runat="server" Text="21" Value="21" />
                                        <telerik:RadComboBoxItem runat="server" Text="22" Value="22" />
                                        <telerik:RadComboBoxItem runat="server" Text="23" Value="23" />
                                        <telerik:RadComboBoxItem runat="server" Text="24" Value="24" />
                                        <telerik:RadComboBoxItem runat="server" Text="25" Value="25" />
                                    </Items>
                                </telerik:RadComboBox>
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
                </Rows>
            </telerik:RadPageLayout>
            </div>
        </form>
    </body>
    </html>

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    139 posts

    Posted 29 Jul Link to this post

    Hello Keith,

    To solve the first problem, to place the ComboBoxes to the left when display's resolution is over 1260px you could try overwriting the max-width property:

    @media only screen and (min-width: 1281px) {
        html body .t-container {
            max-width: none;
        }
    }

    As for the margin between the ComboBoxes, you could increase the value of the row's margin-top property:

    .t-row {
        margin-top: 10px;
    }

    Feel free to modify the suggested code so that it fits your scenario best.

    Regards,
    Peter Milchev
    Telerik by Progress
    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. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 01 Aug Link to this post

    Thanks for your help Peter!

    I will keep that in mind.

    For now, I found a different way to get the layout structured so it looks good on both the Desktop PC and the mobile devices.

    Sincerely,

    Keith Jackson

Back to Top