CODEWITHSUNDEEP
asp.netcssitemtemplate
user1247395
user1247395

Reputation: 419

ItemTemplate in Listview - Layout issue

I have the following Listview in my aspx page

<asp:ListView ID="ListView1" GroupItemCount="4" runat="server" 
     DataKeyNames="contentid" DataSourceID="sqldsPhotos">
<LayoutTemplate>
    <asp:Placeholder
    id="groupPlaceholder"
    runat="server" />
</LayoutTemplate>
<GroupTemplate>
    <div>
    <asp:Placeholder
    id="itemPlaceholder"
    runat="server" />
    </div>
</GroupTemplate>
<ItemTemplate>

    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" />
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
    </ItemTemplate>
<EmptyItemTemplate>           

</EmptyItemTemplate>
</asp:ListView>

The resulting webpage displays my image with the link button beside it. What I would like is the image with the Linkbutton centered below it for each item.

Can someone help me out with the necessary html or css to achieve this.

Upvotes: 0

Views: 2763

Answers (2)

Narendra
Narendra

Reputation: 3117

Try the following html inside ItemTemplate

<div style="float: left; margin-left: 10px; text-align:center;width: 192; ">
    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" />
    <asp:LinkButton ID="LinkButton1" runat="server"
         style="display: block; clear: both;">LinkButton</asp:LinkButton>
</div>

The above code will show divs side by side. So inorder to show 4 divs add with (800px) to your items in list view.

If you don't get the linkbutton at center add some margin-left to it to show it at center.

Upvotes: 1

Kapil Khandelwal
Kapil Khandelwal

Reputation: 16144

Try this:

<div style="width: 192px; text-align:center;">
    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" /><br/>
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>

Upvotes: 0

Related Questions