Shehroz Jalil Shehroz Jalil - 22 days ago 14
ASP.NET (C#) Question

how to display products using Repeater control ASP.NET

i am using repeater control to display results like any e commerce website shows, i mean horizontaly and vertically as well, but my repeater is displaying results in a list but i want it to show 4 items per row then second row then third row, but it is showing items from top to bottom like a straight line list, please tell me what to do and how can i display items like i want them to,i have already seen some answers here but those are not working as well so that's why i am posting my question

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="span4" style="width:187px" runat="server">
<div class="products">
<a href="='<%# Eval("ID") %>'">
<img alt="" src='<%# Eval("ImageLink") %>' height="195" width=""></a>
<br/>
<h3 class="title" style="font-family:Pristina;font-size:medium; width:auto;"> <%# Eval("Name") %></h3>
<p class="price" style="font-family:Pristina;font-size:medium;"><b>Price</b> <%# Eval("Price") %></p>
<a href="<%#Eval("Link") %>" style="font-family:'Malgun Gothic';font-size:medium;">www.shophive.com</a>

</div>
</div>
</ItemTemplate>
</asp:Repeater>


The way i want my products to be display is shown in the image, and i am filling my repeater with dataset, i want my output like these items are displayed

Answer
  1. Wrap your repeater control in a <div> and give it a fixed width.
  2. Add style="display:inline-block;" to <div class="span4"

    <div style="width: 900px;">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <div class="span4" style="display:inline-block;" runat="server">
                    <div class="products">
                        <a href="='<%# Eval("ID") %>'">
                            <img alt="" src='<%# Eval("ImageLink") %>' height="195" width=""></a>
                        <br />
                        <h3 class="title" style="font-family: Pristina; font-size: medium; width: auto;"><%# Eval("Name") %></h3>
                        <p class="price" style="font-family: Pristina; font-size: medium;"><b>Price</b> <%# Eval("Price") %></p>
                        <a href="<%#Eval("Link") %>" style="font-family: 'Malgun Gothic'; font-size: medium;">www.shophive.com</a>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    

Output: enter image description here

Comments