i am trying to figure out how to fix the header row with in the repeater using asp.net. When trying to put position:fixed; in the tr tag. It seems to fix it but it becomes smaller in size and doesn't work with the rest of the table.
any hints or help in the right direction would help significantly!
thanks
<div class="form-panel" style="font-size: small; text-align: left;">
<div class="header">
<div class="contentRestriction" style="height: 22px">
Action Bulletin Exception
<asp:button id="addException" text="Add Exception" runat="server" style="float: right; margin-right: 20px" onclick="addExceptions" />
</div>
</div>
<div class="commands">
<div class="contentRestriction" style="overflow-y: scroll; width: 100%; height: 185px">
<asp:repeater id="repException" runat="server" datasourceid="SP_AB_BULLETIN_EXCEPTION">
<HeaderTemplate>
<div class="form-panel" style="font-size: small;">
<table class="notepad-table" cellpadding="2" cellspacing="0" width="100%" >
<tr style="background-color: #eeeeee; font-weight: bold; ">
<td>Date Time From</td>
<td>Date Time To</td>
<td>Status</td>
<td>Last Modified</td>
<td>Last Modified By</td>
<td>Action</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr id="tr1" runat="server">
<td>
<asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' />
</td>
<td>
<asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' />
</td>
<td>
<asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' />
</td>
<td>
<asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' />
</td>
<td>
<asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' />
</td>
<td>
<asp:Button ID="editException" Text="Edit" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" />
<asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
To get the fixed header effect you can make two small changes to your code.
1) Paste the following style rules in the <head> section of your page:
<style type="text/css">
table tbody, table thead {
display: block;
}
table tbody {
overflow: auto;
height: 100px;
}
th, td {
width: 150px;
}
</style>
2) Replace your <div class="commands"> with the one below:
<div class="commands">
<asp:Repeater ID="repException" runat="server" DataSourceID="SP_AB_BULLETIN_EXCEPTION">
<HeaderTemplate>
<div class="form-panel" style="font-size: small;">
<table class="notepad-table" cellpadding="2" cellspacing="0">
<thead>
<tr style="background-color: #eeeeee; font-weight: bold;">
<th>Date Time From</th>
<th>Date Time To</th>
<th>Status</th>
<th>Last Modified</th>
<th>Last Modified By</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr id="tr1" runat="server">
<td>
<asp:Literal ID="Literal1" runat="server" Text='<%# Eval("EFTV_FROM") %>' />
</td>
<td>
<asp:Literal ID="Literal2" runat="server" Text='<%# Eval("EFTV_TO") %>' />
</td>
<td>
<asp:Literal ID="Literal3" runat="server" Text='<%# Eval("AB_STATUS1") %>' />
</td>
<td>
<asp:Literal ID="Literal4" runat="server" Text='<%# Eval("LAST_MOD_DATE") %>' />
</td>
<td>
<asp:Literal ID="Literal6" runat="server" Text='<%# Eval("UserName") %>' />
</td>
<td>
<asp:Button ID="editException" Text="Edit" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="editException" />
<asp:Button ID="deleteException" Text="Delete" runat="server" CommandName="EXID" CommandArgument='<%# Eval("EX_ID") %>' OnCommand="deleteException" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
Output:
Related
I am developing an aspx page, almost everything works fine if vb-design, but nothing showing up in IE, Firefox, Chrome...I can't open the page in any browser...so I can manage to see my project. But I can't run it, I don't know where to look or what to do.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 60%;
border-collapse: collapse;
border-style: solid;
border-width: 2px;
}
.auto-style2 {
text-decoration: underline;
}
.auto-style3 {
width: 1006px;
border-collapse: collapse;
}
.auto-style4 {
width: 194px;
}
.auto-style5 {
width: 194px;
height: 122px;
}
.auto-style6 {
height: 122px;
width: 600px;
}
.auto-style7 {
width: 600px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td><asp:Label runat="server" ID="lblLastName" Text="Last name"></asp:Label></td>
<td>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblOfferDate" runat="server" Text="Offer date"></asp:Label>
</td>
<td>
<asp:Calendar ID="calOfferDate" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px">
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<NextPrevStyle VerticalAlign="Bottom" />
<OtherMonthDayStyle ForeColor="#808080" />
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<SelectorStyle BackColor="#CCCCCC" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<WeekendDayStyle BackColor="#FFFFCC" />
</asp:Calendar>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblOfferExpirationDate" runat="server" Text="Offer expiration date"></asp:Label>
</td>
<td>
<asp:Calendar ID="calOfferExpirationDate" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px">
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<NextPrevStyle VerticalAlign="Bottom" />
<OtherMonthDayStyle ForeColor="#808080" />
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<SelectorStyle BackColor="#CCCCCC" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<WeekendDayStyle BackColor="#FFFFCC" />
</asp:Calendar>
</td>
</tr>
</table>
<hr />
<br />
<span class="auto-style2"><strong>Set up your car
<br />
</strong>
<table class="auto-style3">
<tr>
<td class="auto-style4">
<asp:Label ID="lblEquipmentLevel" runat="server" Text="Equipment level"></asp:Label>
</td>
<td class="auto-style7">
<asp:DropDownList ID="cbEquipmentLevel" runat="server">
<asp:ListItem Selected="True">Standard</asp:ListItem>
<asp:ListItem>Evolved</asp:ListItem>
<asp:ListItem>Advanced</asp:ListItem>
<asp:ListItem>Premium</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:Label ID="lblWarrantyType" runat="server" Text="Warranty type"></asp:Label>
</td>
<td class="auto-style7">
<asp:RadioButtonList ID="rblWarrantyList" runat="server">
<asp:ListItem Selected="True">Standard (2 years)</asp:ListItem>
<asp:ListItem>Extended (5 years)</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td class="auto-style5">
<asp:Label ID="lblOptionals" runat="server" Text="Optionals"></asp:Label>
</td>
<td class="auto-style6">
<asp:RadioButtonList ID="rblOptionals" runat="server" AutoPostBack="True">
<asp:ListItem Selected="True">Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
<asp:CheckBoxList ID="cblOptionals" runat="server" RepeatDirection="Horizontal" Width="727px">
<asp:ListItem>Alloys wheels</asp:ListItem>
<asp:ListItem>Climatronic</asp:ListItem>
<asp:ListItem>Automatic pilot</asp:ListItem>
<asp:ListItem>Road alert</asp:ListItem>
<asp:ListItem>Navigation</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td class="auto-style4">
<asp:Label ID="lblDiscounts" runat="server" Text="Discounts"></asp:Label>
</td>
<td class="auto-style7"><strong>
<asp:Label ID="lblWholepayment" runat="server" Text="Whole payment"></asp:Label>
</strong>
<asp:CheckBox ID="cbWhole" runat="server" />
<strong>
<asp:Label ID="lblCasco" runat="server" Text="CASCO Insurance"></asp:Label>
</strong>
<asp:CheckBox ID="cbCasco" runat="server" />
</td>
</tr>
<tr>
<td class="auto-style4"> </td>
<td class="auto-style7">
<asp:Button ID="btnDiplayOffer" runat="server" BackColor="Red" BorderColor="White" ForeColor="White" Text="Display Offer" />
</td>
</tr>
</table>
</span>
</div>
<asp:Label ID="LblMessage" runat="server" ></asp:Label>
</form>
</body>
</html>
I have added a new row .
for defaultGPnamer i need to bring that to the right end.
Please help on this .
attached the code
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<div class="rounded" style="margin-left:10px">
<table style="width: 560px; height:95px;">
<tr>
<td colspan="3" style="height:22px">
<div>
<span style="font-size:11pt; color:#008FBE; font-weight:bold; line-height: 22px"><%#Eval("MMHMember")%><%#Eval("UserName") %></span>
<i><b><%#Eval("gender")%> <%#Eval("Age","{0} Yrs</b>") %></b></i>
<span><%#Eval("DateOfBirth")%>
</span>
</div>
</td>
<td style="text-align:right">
<span style="color:#008FBE; font-size:11pt; line-height: 22px;"><%#Eval("NHINumber")%></span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbldefaultgp" runat="server" style="font-weight:bold;color:#008FBE;"><%#Eval("DefaultGPName")%></asp:Label>
</td>
</tr>
<tr style="text-align:left; vertical-align:top">
<td style="width:100px;">
<asp:Image ID="imgPatientPhoto" runat="server" ImageUrl='<%#GetPhotoURL(Eval("PhotoURL","{0}"))%>' style="width:90px;height:95px" />
</td>
<td style="width: 125px">
<br />
<asp:Label ID="lblHome" runat="server" style="font-weight:bold"><%#Eval("HomePhone")%></asp:Label>
<br />
<asp:Label ID="lblWork" runat="server" style="font-weight:bold"><%#Eval("WorkPhone")%></asp:Label>
<br />
<asp:Label ID="lblMobail" runat="server" style="font-weight:bold"><%#Eval("Mobilenumber")%></asp:Label>
</td>
<td style="width:140px;">
<asp:Label ID="lblAddress" runat="server" style="font-weight:bold"><%#Eval("Address") %></asp:Label>
</td>
<td style="" >
<asp:Label runat ="server" ID ="lblEnrolledPractice"><%#Eval("businessname") %> </asp:Label> <br />
<asp:Label runat ="server" ID ="lblCasualPractice"><%#Eval("CasualBusinessname") %> </asp:Label>
<p>
<asp:LinkButton ID="lnkViewConsentSetting" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="ConsentSetting" Visible="<%# ApplyCareSetting %>" >View Consent Settings</asp:LinkButton>
</p>
<p>
<asp:LinkButton ID="lnkViewHealthSummary" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="HealthSummary" Visible ='<%# SetHESVisible("SEHR") %>'>View Health Summary</asp:LinkButton>
<asp:LinkButton ID="lnkViewHealthSummaryConsent" runat="server" Visible ='<%# SetHESVisible("CONSENT") %>' Text="View Health Summary"></asp:LinkButton>
</p>
</td>
</tr>
</table>
</div>
</ItemTemplate>
I would be greatful if someone can help on this.
Label id is lbldefaultgp.
need to bring that data to right end in the banner.
notes::::
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<div class="rounded" style="margin-left:10px">
<table style="width: 560px; height:95px;">
<tr>
<td colspan="3" style="height:22px">
<div>
<span style="font-size:11pt; color:#008FBE; font-weight:bold; line-height: 22px"><%#Eval("MMHMember")%><%#Eval("UserName") %></span>
<i><b><%#Eval("gender")%> <%#Eval("Age","{0} Yrs</b>") %></b></i>
<span><%#Eval("DateOfBirth")%>
</span>
</div>
</td>
<td style="text-align:right">
<span style="color:#008FBE; font-size:11pt; line-height: 22px;"><%#Eval("NHINumber")%></span>
</td>
</tr>
<tr>
<td colspan="3" style="height:22px">
<div>
</div>
</td>
<td>
<p>is this the thing you want?</p> <asp:Label ID="lbldefaultgp" runat="server" style="font-weight:bold;color:#008FBE;"><%#Eval("DefaultGPName")%></asp:Label>
</td>
</tr>
<tr style="text-align:left; vertical-align:top">
<td style="width:100px;">
<asp:Image ID="imgPatientPhoto" runat="server" ImageUrl='<%#GetPhotoURL(Eval("PhotoURL","{0}"))%>' style="width:90px;height:95px" />
</td>
<td style="width: 125px">
<br />
<asp:Label ID="lblHome" runat="server" style="font-weight:bold"><%#Eval("HomePhone")%></asp:Label>
<br />
<asp:Label ID="lblWork" runat="server" style="font-weight:bold"><%#Eval("WorkPhone")%></asp:Label>
<br />
<asp:Label ID="lblMobail" runat="server" style="font-weight:bold"><%#Eval("Mobilenumber")%></asp:Label>
</td>
<td style="width:140px;">
<asp:Label ID="lblAddress" runat="server" style="font-weight:bold"><%#Eval("Address") %></asp:Label>
</td>
<td style="" >
<asp:Label runat ="server" ID ="lblEnrolledPractice"><%#Eval("businessname") %> </asp:Label> <br />
<asp:Label runat ="server" ID ="lblCasualPractice"><%#Eval("CasualBusinessname") %> </asp:Label>
<p>
<asp:LinkButton ID="lnkViewConsentSetting" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="ConsentSetting" Visible="<%# ApplyCareSetting %>" >View Consent Settings</asp:LinkButton>
</p>
<p>
<asp:LinkButton ID="lnkViewHealthSummary" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="HealthSummary" Visible ='<%# SetHESVisible("SEHR") %>'>View Health Summary</asp:LinkButton>
<asp:LinkButton ID="lnkViewHealthSummaryConsent" runat="server" Visible ='<%# SetHESVisible("CONSENT") %>' Text="View Health Summary"></asp:LinkButton>
</p>
</td>
</tr>
</table>
</div>
</ItemTemplate>
I am creating a webpage which has been divide into two sides. On the left there is an image and on the right there can be various user inputs. I put the image into a table cell with float left and the inputs into a cell and float right.
Everything look like what I expect until I add a grid on the right using
<tr>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
</asp:GridView>
</tr>
Then the alignment of the contents on the right all move to the bottom of the left hand side. Can anyone can help me on this how to make it stick back to the right?
Here is my mark-up
<table id="leftT">
<tr id ="table_left" >
<td>
<asp:Image ID="Image1" runat="server" Height="356px" ImageUrl="~/Image/search.jpg" Width="200px" style="vertical-align:text-top"/>
</td>
</tr>
</table>
<table id ="rightT">
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="USERNAME" DataValueField="USERNAME">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SOConnectionString %>" ProviderName="<%$ ConnectionStrings:SOConnectionString.ProviderName %>" SelectCommand="SELECT USERNAME FROM USERMASTER WHERE USERSTATUS = 1 AND USERACCESSRIGHTS = 'Non-Administrator'"></asp:SqlDataSource>
</td>
<td>
<asp:Label ID="lblCreateOnM" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblCreateOn" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
</td>
<td><asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:TextBox ID="txtDate" runat="server" Enabled="False"></asp:TextBox>
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar></td>
<td>
<asp:Label ID="lblUpdateOnM" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblUpdateOn" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblTask" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource2" DataTextField="TASKNAME" DataValueField="TASKNAME">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SOConnectionString %>" ProviderName="<%$ ConnectionStrings:SOConnectionString.ProviderName %>" SelectCommand="SELECT DISTINCT TASKNAME FROM TASKMASTER"></asp:SqlDataSource>
</td>
<td>
<asp:Label ID="lblUpdateByM" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblUpdateBy" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
Here The mistake you are doing is, you are creating two tables one below the other.Instead take only one table and two columns and places all the controls in these two columns as shown below
ex-
<table>
<tr>
<td id='Left_id'>
//Put all the left controls here
</td>
<td id='Right_id'>
//Put some controls here if required
<table>
<tr>
<td>
//some Controls Here
</td>
</tr>
</table>
</td>
</tr>
</table>
I created a linqdatasource connection to my sql server and i load my data inside a listview.
Now for that listview i added another table from the top of that listview like a title.(i also tried div or p)
The issue now is when i add this module to my website there is a gap between the listview and the top item whether its a table or a dive or anything.
Inside visual studio it show fine with no gap. Here is my code:
<%# Control Language="VB" ClassName="MyModules.ProductDetailsModule" Inherits="DotNetNuke.Entities.Modules.PortalModuleBase" %>
<%# Import Namespace="CodingStaff.Modules.MenuBox.Licensing" %>
<script runat="server">
Dim prodID As Integer
</script>
<%
prodID = Convert.ToInt32(Request.QueryString("ProductID"))
%>
<style type="text/css">
h1 {
font-family: Lucida Grande;
font-size: 15px;
}
td {
font-family: Lucida Grande;
font-size: 13px;
color: #999999;
}
</style>
<table style="width: 704px;">
<tr style="width: 704px;">
<td>
<table>
<tbody>
<tr bgcolor="#e7e7e5" height="35">
<td align="left" style="width: 704px;">
<h1 style="color: #666666;">Technical info</h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<asp:ListView ID="ListView1" runat="server" DataKeyNames="PRODUCTID" DataSourceID="LinqDataSource1">
<ItemTemplate>
<tr>
<td runat="server" style="width:352px"><strong>Product Code:</strong></td>
<td style="width:352px"><strong>
<asp:Label ID="PRODUCTIDLabel" runat="server" Text='<%# Eval("PRODUCTID") %>' /></strong>
</td>
</tr>
<tr>
<td runat="server" style="width:352px"><strong>Name:</strong></td>
<td style="width:352px"><strong>
<asp:Label ID="PRODUCTNAMELabel" runat="server" Text='<%# Eval("PRODUCTNAME") %>' /></strong>
</td>
</tr>
<tr>
<td runat="server" style="width:352px"><strong>Description:</strong></td>
<td style="width:352px"><strong>
<asp:Label ID="PRODUCTDESCRIPTIONLabel" runat="server" Text='<%# Eval("PRODUCTDESCRIPTION") %>' /></strong></td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server" border="0" style="">
<tr runat="server" id="itemPlaceholderContainer">
<td runat="server" id="itemPlaceholder"></td>
</tr>
</table>
<div style="">
</div>
</LayoutTemplate>
</asp:ListView>
</td>
</tr>
</table>
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="ProductsModule.ProductsModuleDALDataContext" EntityTypeName="" TableName="PRODUCTs" Where="PRODUCTID==#prodID">
<WhereParameters>
<asp:QueryStringParameter Name="prodID" QueryStringField="ProductID" Type="Int32" />
</WhereParameters>
</asp:LinqDataSource>
And here a similar code with the same issue:
<%# Control Language="VB" AutoEventWireup="false" CodeFile="View.ascx.vb" Inherits="DesktopModules_MyModules_ProductsModule_View" %>
<asp:LinqDataSource ID="LinqDataSourceProducts" runat="server" ContextTypeName="ProductsModule.ProductsModuleDALDataContext" EntityTypeName=""
TableName="PRODUCTs" OrderBy="PRODUCTNAME" Select="new (PRODUCTID, PRODUCTNAME)">
</asp:LinqDataSource>
<style type="text/css">
td {
font-family:Lucida Grande;
color:#666666;
font-size:15px;
}
table{
margin-top: 10px;
}
A{
text-decoration:none;
}
a:link{
color:#666666;
}
a:visited{
color:#666666;
}
a:hover{
color:#666666;
}
a:focus{
color:#666666;
}
a:active{
color:#666666;
}
</style>
<asp:Table runat="server" style="width: 704px;" CellPadding="10" CellSpacing="0">
<asp:TableRow bgcolor="#e7e7e5" height="45">
<asp:TableCell align="left" style="width: 100%;" >
<p1 style="color: #666666; font-size:inherit"><strong>Product list</strong></p1>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:ListView ID="ListView1" runat="server" DataSourceID="LinqDataSourceProducts" GroupItemCount="4" DataKeyNames="PRODUCTID">
<AlternatingItemTemplate>
<td runat="server" style="background-color: #ffffff;color: #284775;" width="176">
<asp:Image ImageUrl="~/images/drop59.png" ID="Image1" runat="server" />
<a href="http://localhost/dnn7/Commercial-vehicle-lubricants/Product-line/product-details?ProductID=<%# Eval("PRODUCTID") %>" target="_self">
<asp:Label ID="PRODUCTNAMELabel" runat="server" Text='<%# Eval("PRODUCTNAME") %>' /></a>
<br />
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="background-color: #FFCC66;color: #000080;">PRODUCTID:
<asp:Label ID="PRODUCTIDLabel1" runat="server" Text='<%# Eval("PRODUCTID") %>' />
<br />
PRODUCTNAME:
<asp:TextBox ID="PRODUCTNAMETextBox" runat="server" Text='<%# Bind("PRODUCTNAME") %>' />
<br />
</td>
</EditItemTemplate>
<EmptyDataTemplate>
<table runat="server" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<InsertItemTemplate>
<td runat="server" style="">PRODUCTID:
<asp:TextBox ID="PRODUCTIDTextBox" runat="server" Text='<%# Bind("PRODUCTID") %>' />
<br />PRODUCTNAME:
<asp:TextBox ID="PRODUCTNAMETextBox" runat="server" Text='<%# Bind("PRODUCTNAME") %>' />
<br />
</td>
</InsertItemTemplate>
<ItemTemplate>
<td runat="server" style="background-color: #ffffff;color: #333333;" width="176">
<asp:Image ImageUrl="~/images/drop59.png" ID="Image1" runat="server" />
<a href="http://localhost/dnn7/Commercial-vehicle-lubricants/Product-line/product-details?ProductID=<%# Eval("PRODUCTID")%>" target="_self">
<asp:Label ID="PRODUCTNAMELabel" runat="server" Text='<%# Eval("PRODUCTNAME") %>' /></a>
<br />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="groupPlaceholderContainer" runat="server" border="0" style="background-color: #FFFFFF;border-collapse: collapse;font-family: Lucida Grande, Helvetica, sans-serif; font-size:15px; color:#999999;">
<tr id="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="text-align: center;background-color: #FFCC66;font-family: Lucida Grande, Helvetica, sans-serif;color: #333333; font-size:15px;"></td>
</tr>
</table>
</LayoutTemplate>
<SelectedItemTemplate>
<td runat="server" style="background-color: #FFCC66;font-weight: bold;color: #000080;">PRODUCTID:
<asp:Label ID="PRODUCTIDLabel" runat="server" Text='<%# Eval("PRODUCTID") %>' />
<br />PRODUCTNAME:
<asp:Label ID="PRODUCTNAMELabel" runat="server" Text='<%# Eval("PRODUCTNAME") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
UPDATE!!!!!
Ive looked the website from chrome with f12 to see what happens with the gap. Ive notice that on every table declaration a gap is added. here is a sample image. the orange is the gap thats generated and also below Technical info there is a gap again.
I found the problem to this. I had inside another module in another page a padding top 30px. And as it seems it shares this options to the whole site. So anywhere that a table declaration existed it added a 30px gap on top. I fixed it by making that specific 30px padding with table.aVariableName so that is dinstinct to a specific table only
I want to align ' : ' vertically, how to do that?
<td>
<b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
<br></br>
<b>Name</b>:<asp:Label ID="Name0" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
<br></br>
<b>Age</b>:<asp:Label ID="Age0" runat="server" Text='<%# Bind("Age") %>'></asp:Label>
<br></br>
<b>Height</b>:<asp:Label ID="Height0" runat="server" Text='<%# Bind("Height") %>'></asp:Label>
<br></br>
<b>Education</b>:<asp:Label ID="Education0" runat="server" Text='<%# Bind("Education") %>'></asp:Label>
</td>
</tr>
I simply split the fields and values into columns. Then all you have to do is right-align the field table-cell.
CSS:
.left-column
{
text-align: right;
font-weight: bold;
}
HTML:
<table>
<tr>
<td>
<table>
<tr>
<td class="left-column">
ID:
</td>
<td>
<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>' />
</td>
</tr>
<tr>
<td class="left-column">
Name:
</td>
<td>
<asp:Label ID="Name0" runat="server" Text='<%# Bind("Name") %>' />
</td>
</tr>
<tr>
<td class="left-column">
Age:
</td>
<td>
<asp:Label ID="Age0" runat="server" Text='<%# Bind("Age") %>' />
</td>
</tr>
<tr>
<td class="left-column">
Height:
</td>
<td>
<asp:Label ID="Height0" runat="server" Text='<%# Bind("Height") %>' />
</td>
</tr>
<tr>
<td class="left-column">
Education:
</td>
<td>
<asp:Label ID="Education0" runat="server" Text='<%# Bind("Education") %>' />
</td>
</tr>
</table>
</td>
</tr>
</table>
You have invalid markup as colon(:) doesn't inside b or asp:Label.
change
<b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
to this
<b>ID :</b><asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
You'll need to use elements that have display:inline-block then you can use vertical-align:middle
EDIT
I misunderstood the question. You could set a minimum width on your <b> tags, but it's not fully cross-browser:
<style>
p b { min-width: 50px; display:inline-block; }
</style>
<p><b>Foo</b>:</p>
<p><b>Bar</b>:</p>
However, as you're using a table anyway, I'd suggest using the table itself to keep things aligned