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

RadPageLayout - Alignment of Columns and Space between Rows

2 Answers 387 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 26 Jul 2016, 08:44 PM
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 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 29 Jul 2016, 11:52 AM
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.
0
Keith
Top achievements
Rank 1
answered on 01 Aug 2016, 12:39 PM

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

Tags
PageLayout
Asked by
Keith
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Keith
Top achievements
Rank 1
Share this question
or