asp.net listview with two rows in grouptemplate

Question

First question on S.O.

I have to do a search result page in asp.net and I have some problems - I will have (for each "box") an image of the book cover and the title of the book

Knowing that all images aren't the same height, I want to be able to vertically align them to bottom. I searched really hard on the web and found some solution using display table/table-row/table-cell.

Everything works fine, using ListView's GroupTemplate (as row) and ItemTemplate (as cell) If i only want to display images - but - I want images vertically aligned to bottom and the book's title below (with a link like "learn more" below the title).

Knowing that I couldn't put my book title in the same cell than the image (because sometime the title will take two lines, which will break the design again...), I think that I would need another row (like in my code below). I tought that putting my two rows in GroupTemplate would work but ListView doesn't seem to give me the hability to call two different itemtemplates (one for the image and one for the text placed in another row, below his image).

Any help would be greatly appreciated and if you have other alternatives, I'm opened to suggestions. Bear in mind that I need a DataPager so the ListView- i think - is the only way to go.

Here's my css

#grid{
    background: lightgreen;
    border-spacing: 10px;
    display: table;
}
#grid .row{display: table-row;}
#grid .result{
    display: table-cell;
    vertical-align: bottom;
}

Here's my search result ListView draft (image is good, but only crappy "test" text)

<asp:ListView ID="lvSearchResults" runat="server" OnPagePropertiesChanged="DataPager_PreRender" OnPagePropertiesChanging="DataPager_PreRendering" GroupItemCount="5" >
        <LayoutTemplate>
            <div id="grid">
                <asp:PlaceHolder ID="groupPlaceholder" runat="server" />
            </div>
        </LayoutTemplate>
        <GroupTemplate>
            <div class="row">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </div>
            <div class="row">
                <asp:PlaceHolder ID="itemPlaceHolder1" runat="server" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
            <div class="result">
                <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p>
            </div>
        </itemtemplate>
        <ItemTemplate>
            <div class="result">
                <p><a href='<%# Container.DataItem.URI %>'>test</a></p>
            </div>
        </itemtemplate>
    </asp:ListView>

Thanks a lot, - Eric

Answer 1

Somehow I've been able to do what I wanted:

By giving a fixed height to the remaining content (title and a link), the images continues to be vertically aligned. So in my particular case, no need to create a second row in the groupTemplate.

Fixed height for my title because it can take (but not more) two lines or only one line. Since the link below my title is the same for every itemTemplate itteration, no need to specify height for his block.

Thanks MajoB for your answer, but somehow it didn't work for me.

Here is my new and improved code... ;)

        <GroupTemplate>
            <div class="row">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </div>
        </GroupTemplate>
        <ItemTemplate>
            <div class="result">
                <a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a>
                <div style="height: 40px;margin-top: 10px;"><asp:Literal ID="litTitre" runat="server" Text='<%# TrunkStringRelay(Container.DataItem.Titre, 40) %>' /></div>                    
                <a href='<%# Container.DataItem.URI %>'>En savoir plus &raquo;</a>
            </div>
        </itemtemplate>

Answer 2

Instead of two item templates:

<ItemTemplate>
    <div class="result">
        <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p>
     </div>
 </itemtemplate>
 <ItemTemplate>
     <div class="result">
         <p><a href='<%# Container.DataItem.URI %>'>test</a></p>
     </div>
 </itemtemplate>

Try one:

<ItemTemplate>
    <div class="result">
        <p><a href='<%# Container.DataItem.URI %>'><img src='<%# Container.DataItem.LesImages.Petite %>' alt="" /></a></p>
     </div>
     <div style="clear:both"></div>
     <div class="result">
         <p><a href='<%# Container.DataItem.URI %>'>test</a></p>
     </div>
 </itemtemplate>