Question

I am using DataList control to show three products per line horizontally. But there is layout problem and it pushes up the product image container element like the below :

Data List Layout problem http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg

Here is the code :

  <asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
                DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
                <ItemTemplate>

                        <a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
                            <asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
                                Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
                                AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
                        <br />
                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
                            Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
                </ItemTemplate>
            </asp:DataList>

How can I get over the problem ?

Thanks in advance.

Answer 1

I was having a similar issue. I ended up having to break the linked image and and text into their own div and style them accordingly:

<ItemTemplate>
    <div class="outer">
        <div class="top">
            <asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
            </asp:HyperLink>
        </div>
        <div class="bottom">
            <asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
        </div>
    </div>
</ItemTemplate>

I’m sure there are cleaner ways to do this and this is just example of what the HTML output might look like. This is just “off the cuff” but if you put in an empty htm file it will display.

<div style="width: 100px;">
    <!-- first row -->
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="height:50px; background-color:Aqua; vertical-align:bottom;">
            <span>text</span>
        </div>
    </div>
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="background-color: Aqua;">
            <span style="height:50px; vertical-align:bottom;">text</span>
        </div>
    </div>
    <!-- second row -->
    <div style="float:left; width:50px; border: 2px solid black;">
        <div>
            <a href="#">link</a>
        </div>
        <div style="height:50px; background-color:Aqua; vertical-align:bottom;">
            <span>text</span>
        </div>
    </div>
</div>

You can most likely use RepeatLayout=”Flow” ItemStyle=”float:left;” in your DataList control to help as well.