locked
How to code to add more spaces between the caption and label inside the <ItemTemplate> of a DataList data control? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-830563764 posted

    On a VS2010 ASPnet 4 webpage, I have a DataList control.  Inside the <ItemTemplate>
    I have a caption and a label.  How can I code to add more spaces between the caption and
    label, so that all the labels will be lined up to the right?   

    Have to use <Table><TR><TD>?

    Friday, June 24, 2016 8:34 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User36583972 posted

    Hi wonjartran,

    You can use css to line up all the labels to the right. The following code for your reference.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divProducts {
            font-family: Arial, Verdana, Sans-Serif;
            font-size: 12px;
            padding: 10px;
        }

        .item {
            border: solid 1px #0066CC;
            padding: 10px;
        }

        .right {
            text-align: right;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset>
                <h2>Datalist control</h2>
                <div id="divProducts">
                    <asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
                        RepeatDirection="Horizontal" RepeatLayout="Table">
                        <ItemTemplate>
                            <div class="item">
                                <span><strong><%# Eval("Name") %></span></strong><br />
                                <span><%# Eval("Description") %></span><br /><br />
                                <div class="right">
                                    <b>test</b><br />
                                    <asp:Label ID="Label1" runat="server" Text="test02"></asp:Label>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:DataList>
                </div>
            </fieldset>
        </div>
    </form>
</body>
</html>

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 27, 2016 7:41 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2103319870 posted

    If possible post your Datalist html mark up

    Friday, June 24, 2016 8:41 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2010311731 posted

    You can set the align property on the TD tag...

    <table>
<tr>
<td>Caption</td>
<td align="right">Label</td>
</tr>
</table>

    Matt

    Friday, June 24, 2016 8:50 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User36583972 posted

    Hi wonjartran,

    You can use css to line up all the labels to the right. The following code for your reference.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divProducts {
            font-family: Arial, Verdana, Sans-Serif;
            font-size: 12px;
            padding: 10px;
        }

        .item {
            border: solid 1px #0066CC;
            padding: 10px;
        }

        .right {
            text-align: right;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <fieldset>
                <h2>Datalist control</h2>
                <div id="divProducts">
                    <asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
                        RepeatDirection="Horizontal" RepeatLayout="Table">
                        <ItemTemplate>
                            <div class="item">
                                <span><strong><%# Eval("Name") %></span></strong><br />
                                <span><%# Eval("Description") %></span><br /><br />
                                <div class="right">
                                    <b>test</b><br />
                                    <asp:Label ID="Label1" runat="server" Text="test02"></asp:Label>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:DataList>
                </div>
            </fieldset>
        </div>
    </form>
</body>
</html>

    Best Regards,

    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 27, 2016 7:41 AM