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