CODEWITHSUNDEEP
c#cssasp.netlistviewasp.net-4.0
fdkgfosfskjdlsjdlkfsf
fdkgfosfskjdlsjdlkfsf

Reputation: 3301

Limiting horizontal listview to space within screen?

I have a listview that repeats horizontally, and it displays 20 images. With my screen resolution, there's space for 5 images/row, so I should see 4 rows.

Unfortunately, it is currently showing one long row with all 20 images. It's also displaying the horizontal scrollbar.

My question: how can I limit the space to my screen resolution so that I see the 4 rows with images and no horizontal scrollbar? Everything should be displayed within the screen. If anything, there should be a vertical scrollbar to scroll down.

I added some CSS to limit the size of the body to 100%, but nothing changed. I also set the div within <body> to 100%, but didn't do anything either.

Here's the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    body, html
    {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:100%">
        <asp:DataList id="DataListImages" RepeatDirection="Horizontal" RepeatLayout="Table"
               RepeatColumns="0" runat="server">
             <HeaderStyle BackColor="#aaaadd">
             </HeaderStyle>
             <AlternatingItemStyle BackColor="Gainsboro">
             </AlternatingItemStyle>
             <HeaderTemplate>
             </HeaderTemplate>
             <ItemTemplate>
                <div style="width: 192px; height: 162px"></div>
                <asp:Image runat="server" id="ProductImage"
                     AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
                     ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
             </ItemTemplate>
        </asp:DataList>

    </div>
    </form>
</body>
</html>

Upvotes: 0

Views: 693

Answers (1)

IrishChieftain
IrishChieftain

Reputation: 15253

First off, this is a DataList - you need to fix that.

You need to take a look at the ListView GroupTemplate:

Using GroupTemplate in ASP.Net ListView Control(Tiled Display)

You may want to pay attention to the dimensions of the images and the file sizes from a performance point of view.

Here's a sample of using ListView GroupPlaceHolder to achieve a certain layout:

<asp:ListView ID="galleryView" runat="server" OnPagePropertiesChanging="ChangePage" 
        GroupPlaceholderID="groupPlaceHolder" ItemPlaceholderID="itemPlaceholder" 
GroupItemCount="5">
        <LayoutTemplate>              
            <div ID="groupPlaceHolder" runat="server"></div>
        </LayoutTemplate>
        <GroupTemplate>       
            <div ID="itemPlaceholder" runat="server"></div>
        </GroupTemplate>
        <ItemTemplate>
            <asp:Image runat="server" id="ProductImage"
             AlternatingText='<%# DataBinder.Eval(Container.DataItem, "Name") %>'
             ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}") %>' />
        </ItemTemplate>
         <GroupSeparatorTemplate>
          <div id="Div1" runat="server">
              <div style="clear:both"><br /></div>
          </div>
        </GroupSeparatorTemplate> 
    </asp:ListView>
    <div style="clear:both; padding-top:8px; padding-left:8px;">
        <asp:DataPager ID="DataPager1" runat="server" PagedControlID="galleryView" PageSize="40">
            <Fields>
                <asp:NumericPagerField ButtonCount="20" />
            </Fields>
        </asp:DataPager>
    </div>

Upvotes: 0

Related Questions