ListView - styling the ItemTemplate
I am trying to create an ItemTemplate using a 4x3 table. I want the first column to contain the image and cells in the other columns the image information. I am using the code below, but the first line is displayed at the bottom of the image and the second line is below. What am I doing wrong?
Thanks in advance.
<LayoutTemplate>
<table runat="server" cellpadding="2" id="tblBooks" style="">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td rowspan="4">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
</td>
<td colspan="2" style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
<asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
</td>
</tr>
<tr runat="server">
<td colspan="2" style="padding-left:10px;">
<asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
<asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
</td>
</tr>
<tr runat="server">
<td colspan="2" style="padding-left:10px;">
</td>
</tr>
<tr runat="server">
<td>
</td>
<td>
</td>
</tr>
</ItemTemplate>
EDIT: To be clearer, the output I got looks like this:
______________________________________________
| |___________Title_____________|
| Image |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
But I am getting the following:
______________________________________________
| _____________ | |
|| Image | | |
|| | | |
||____________| |___________Title_____________|
| |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
CSS reset.
source to share
With rowspan, the column and all other rows / cells are automatically added. You can remove all caps and the second td on the last line.
<ItemTemplate>
<tr runat="server">
<td rowspan="4">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
</td>
<td style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
<asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
</td>
</tr>
<tr runat="server">
<td style="padding-left:10px;">
<asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
<asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
</td>
</tr>
<tr runat="server">
<td style="padding-left:10px;">
</td>
</tr>
<tr runat="server">
<td>
</td>
</tr>
</ItemTemplate>
UPDATE: Based on the provided jsfiddle, it shows that the problem is with the use of the vertical-align: basic attribute applied in the reset css stylesheet. If this CSS attribute is removed or overridden for a header cell, something like vertical-align: bottom is displayed as expected. See http://jsfiddle.net/9HsvF/10/
source to share
I wrote down a simple code: <tr>
& tbsp; <td>Image Code</td>
<td colspan="2">Title</td>
</tr>
<tr>
<U> <td rowspan="3"><td>
<td colspan="2">Name</td>
</tr>
<tr>
<td>Value1<td>
<td>Value2</td>
</tr>
<tr>
<td>Value1<td>
<td>Value2</td>
</tr>
Try it with your code. Hope it works the way you want it to.
source to share