CODEWITHSUNDEEP
c#asp.netrepeater
rikket
rikket

Reputation: 2407

ASP.NET Repeater Item add divider after each row

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

Answers (4)

reno184
reno184

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

Lucky Pierre
Lucky Pierre

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

Ahmed Alaa El-Din
Ahmed Alaa El-Din

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

Yuriy Galanter
Yuriy Galanter

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

Related Questions