Page not expanding with Photo Album

areed24 · March 31st, 2009, 11:12 AM

I followed the Gig pics example in Chapter 13 and it worked fine for the PlanetWrox site, yet when I tried to use it on my site, the page doesn't expand when the photos are added, the cpMainContent area stays the same and the footer expands. Any idea why this is happening? Here is the code and the css.

Code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
        DataSourceID="LinqDataSource1" DataTextField="Name" DataValueField="Id">
    </asp:DropDownList>
    <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
        ContextTypeName="MyDataContext" Select="new (Id, Name)" 
        TableName="PhotoAlbums">
    </asp:LinqDataSource>
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="Id" 
        DataSourceID="LinqDataSource2">
        <ItemTemplate>
            <li style="">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
            <asp:Label ID="DescriptionLabel" runat="server" 
                    Text='<%# Eval("Description") %>' />
        </li>
        </ItemTemplate>
        <LayoutTemplate>
            <ul class="itemContainer">
                <li ID="itemPlaceholder" runat="server" />
                </ul>
                <div style="">
                    <asp:DataPager ID="DataPager1" runat="server" PageSize="3">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                            <asp:NumericPagerField />
                            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" 
                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        </Fields>
                    </asp:DataPager>
                </div>
            </LayoutTemplate>
        </asp:ListView>
        <asp:LinqDataSource ID="LinqDataSource2" runat="server" 
            ContextTypeName="MyDataContext" TableName="Pictures" 
            Where="PhotoAlbumId == @PhotoAlbumId">
            <WhereParameters>
                <asp:ControlParameter ControlID="DropDownList1" Name="PhotoAlbumId" 
                    PropertyName="SelectedValue" Type="Int32" />
            </WhereParameters>
        </asp:LinqDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

css

Code:

body 
{
    margin:0 auto;
    width: 800px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 color: #000066;
 background-color: #FFCCCC;
}
p
{
    text-align: left;
    margin-left:15px;
    margin-right:15px;
}
#PageWrapper {
 width:800px;
 background-color: white;
 border: 1px solid black;
 margin-top: 15px;
 }
 
 #Header
{
 background-color: #fff;
 width: 800px;
 height: 133px;
}
.HeaderLink
{
 width: 800px; 
 height: 133px; 
 display: block; 
}
#MenuWrapper
{
 width: 800px;
 height: 22px;
 padding-top: 7px;
}
#MenuWrapper a
{
  color: #000;
}
.MainMenu
{
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 width: 800px;
 height: 21px;
 background-color : #ffcccc;
 text-align: left;
}
#MainContent
{
 font-size: 0.8em;
 width: 800px;
 background-color: #e1e1e1;
 min-height: 400px;
 border-bottom: 1px solid black;
 padding-top: 25px;
 text-align:left;
}
#Footer {
 clear:both;
 text-align: center;
 font-size: 0.7em;
 color: #000033;
}
#Footer a{
 text-align: right;
 text-decoration: none;
 color: #000033;
}
#Footer a:hover{
 text-decoration: underline;
 color: #6FBC22;
}
.StaticMenuItemStyle, .StaticMenuItemStyle a 
{
    margin-left: 5px;
 font-size: 13px;
 font-weight: bold;
 text-decoration: none;
}
.itemContainer
{
  text-align: left;
  width: 600px;
  list-style-type: none;
}
.itemContainer li
{
  text-align: left;
  height: 280px;
  width: 200px;
  float: left;
}
.itemContainer li img
{
  text-align: left;
  width: 150px;
  margin: 10px 20px 10px 0;
}

here is the master page

Code:

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="~/Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="PageWrapper" align="center">
        <div id="Header"><a class="HeaderLink" href="~/index.aspx" runat="server">
        <img src="/Images/header.jpg" width="733" height="132" border="0" alt="header" />
            </a></div>
        <div id="MenuWrapper">
            <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
                DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
            <DynamicMenuStyle CssClass="DynamicMenuStyle" />
            <StaticSelectedStyle CssClass="StaticSelectedStyle" />
            <StaticMenuItemStyle ItemSpacing="10px" CssClass="StaticMenuItemStyle" />
            <DynamicHoverStyle CssClass="DynamicHoverStyle" />
            <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
            <StaticHoverStyle CssClass="StaticHoverStyle" />
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                ShowStartingNode="False" />
        </div>
        <div id="MainContent">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" 
                Font-Size="0.8em" PathSeparator=" &gt;">
                <PathSeparatorStyle Font-Bold="True" ForeColor="#507CD1" />
                <CurrentNodeStyle ForeColor="#333333" />
                <NodeStyle Font-Bold="True" ForeColor="#284E98" />
                <RootNodeStyle Font-Bold="True" ForeColor="#507CD1" />
            </asp:SiteMapPath><br />
            <div id="login">
            <asp:LoginName ID="LoginName1" runat="server" FormatString="Welcome {0}!" />
            <asp:LoginView ID="LoginView1" runat="server">
                <RoleGroups>
                    <asp:RoleGroup Roles="Manager">
                        <ContentTemplate>
                            <asp:HyperLink ID="HyperLink1" runat="server" 
                                NavigateUrl="~/Management/Default.aspx">Manage Site</asp:HyperLink> or
                                <asp:LoginStatus ID="LoginStatus2" runat="server" />
                        </ContentTemplate>
                    </asp:RoleGroup>
                </RoleGroups>
                <LoggedInTemplate>
                    (<asp:LoginStatus ID="LoginStatus1" runat="server" />)
                </LoggedInTemplate>
            </asp:LoginView>
            </div>
            <br />
        <asp:ContentPlaceHolder id="cpMainContent" runat="server">  
        </asp:ContentPlaceHolder>
    </div>
            <div id="Footer">About Us | Contact Us | Disclaimer</div>
    </div>
    </form>
</body>
</html>

Imar · March 31st, 2009, 03:44 PM

It's a bit difficult to see for me as there's a) a lot of code and b) you made some modifications which make the project incompatible with mine, but I think you can fix it by adding a clear on the div right above the pager bar. E.g. change this:

<div style="">
<asp:DataPager ID="DataPager1" runat="server" PageSize="3">

to this:

<div style="" style="clear: both">
<asp:DataPager ID="DataPager1" runat="server" PageSize="3">

Hope this helps,

Imar

areed24 · April 1st, 2009, 07:37 AM

Thank you thank you thank you. I can't tell you how much time I put in going back and forth on the css to see why that was happening. Can you tell me why that worked? Also, when you delete items from the photo album, it deletes the item from the database, but not the Gigs folder. Is there a way to delete the items from the gigs folder when it is deleted from the database?

Imar · April 2nd, 2009, 03:26 PM

In the original design, I use float: left on the MainContent and SideBar divs to float them next to each other. To end the float and return to normal, I added clear: both to the Footer div.

In your case, you didn't have the exact setup so the div didn't end the float correctly. You were still having floats for the list items. Adding a div that clears the float put things back to normal again, causing the footer to be placed below the list items.

Hope this helps,

Imar