Reputation: 2407
I have the following Repeater and I am trying to add a divider (dotted line or similar) after each row but the style is getting messed up, what am I doing wrong?
Code:
<ItemTemplate>
<table id="tableItem" runat="server">
<tr>
<td style="width:400px;">
<%-- <asp:Label ID="lblEmployeeId" runat="server" Text='<%#Eval("EmployeeId") %>' ></asp:Label>--%>
<asp:HiddenField ID="HdnEmployeeId" runat="server" Value='<%#Eval("EmployeeId") %>' />
<asp:Literal Text="" runat="server" ID="LiteralUser" ></asp:Literal>
</td>
</tr>
<tr>
<td style="width: 100px;">
<asp:HiddenField ID="HdnRequestId" runat="server" Value='<%#Eval("id") %>' />
<asp:Label ID="lblDate" runat="server" Text='<%#Eval("Date", "{0:dd/M/yyyy}") %>'></asp:Label>
</td>
<td style="width: 80px;">
<asp:Label ID="lblHours" runat="server" Text='<%#Eval("Hours") %>'></asp:Label>
</td>
<td style="width: 50px; font-size:10px;">
<asp:Label ID="lblPeriod" runat="server" Text='<%#Eval("AMorPM") %>'></asp:Label>
</td>
<td style="width: 850px; font-size:10px;">
<asp:Label ID="lblNote" runat="server" Text='<%#Eval("Note") %>'></asp:Label>
</td>
<td style="50px">
<asp:RadioButtonList ID="rbtVerified" runat="server" >
<asp:ListItem Value="1">Accept</asp:ListItem>
<asp:ListItem Value="2">Reject</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:TextBox ID="txtNotes" runat="server" ></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:900px;">
<asp:Label ID="lblBreak" runat="server" Text="------------------------------------------------------------------------------"></asp:Label>
</td>
</tr>
</table>
By Style getting messed up I mean the dotted line is being displayed only under the first column (lblDate
) and the lblDate
width is expanded.
Upvotes: 1
Views: 4514
Reputation: 114
Another way to do that just with with css flex
<div style="display: flex; align-items: center">
<div>My awesome article price:</div>
<div style="flex:1;border-bottom: dotted 1px #eee"></div>
<div>10.00€</div>
</div>
Upvotes: 0
Reputation: 570
Another approach would be to spit out a div at the very end of your template and change its border to dotted. I tend to use this approach quiet often as it gives me the ability to easily add space between each item by targeting the div and adding margin around it.
So something like this:
<ItemTemplate>
...
<div class="divider"></div>
</ItemTemplate>
.divider
{
border: 1px dotted #C5C5C5;
height: 5px;
margin-bottom: 15px;
width: 100%;
}
Upvotes: 0
Reputation: 1833
you can use a separator template and inside it insert <hr />
<asp:Repeater runat="server" ID="rp">
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
Upvotes: 3
Reputation: 39817
Since your middle TR has 6 TDs, add attribute colspan="6" to TD in the 1st and the last row
<td colspan="6" style="width:400px;">
...
<td colspan="6" style="width:900px;">
By the way, you're specifying different width for the 1st and the last TD and both are less than summary width of inner TDs, so those styles won't have any effect and can be removed.
Upvotes: 0