Joe W
Joe W

Reputation: 1567

Ajax Accordion moving left column content up and down with 1st pane only

My page setup has one column for the top row, the second row is split into two columns and the last row is again only one column.

The Ajax accordion I have is in the 2nd column of the 2nd row, in the first column, I have my navigation the navigation page is on the master page so it is on every page. The accordion is in a content placeholder, so it only appears on one page.

The problem I am having is when I am on the page with the accordion, when ever I expand the first pane it pushes the other panes down like its supposed to, but along with that, the navigation moves down too. When I collapse it, it all moves back up. When I expand the 2nd pane, it only moves the accordion as it is intended.

This is only occurring on 2 browsers: Firefox and IE. I do not encounter this problem on chrome.

If I can clarify anything further I will do my best, if you need any code snipits I will provide them as needed, I just don't understand why it is doing this.

Thank you.

CSS:

.aHeader 
{

cursor:pointer;
background-color:#00457c; 
border: 1px solid #00457c;
color: White;
font-family: Arial, Helvetica, Sans-Serif; 
font-size:8pt; 
font-weight:bold;
padding:5px; 
margin-top:5px;
text-align:left; 

}

.aContent 
{
background-color:#F5FCFF; 
border:1px solid #00457c;
font-family:Arial, Helvetica, Sans-Serif; 
font-size:.8em; 
font-weight:normal;
border-top:none; 
padding:5px; 
padding-top:10px;

}
.aSelected
{
background-color:#005ca8; 
border: 1px solid #005ca8;
font-family: Arial, Helvetica, Sans-Serif; 
font-size:8pt; 
font-weight:bold;
padding:5px; 
margin-top:5px;
text-align:left; 
}

this is the table row that contains the parts that move, the first TD is fixed with the vertical align, the 2nd TD with the navigation stays the same

<tr>
 <td align="top" style="vertical-align:top;"><asp:Panel runat="server" 
  ID="pnlSelectedCustomer" Visible="false" class="style1" >Selected Customer: 
  <asp:DropDownList runat="server" AppendDataBoundItems="true" ID="ddlSelectedCustomer"
                                onselectedindexchanged="ddlSelectedCustomer_SelectedIndexChanged"
  AutoPostBack="True" EnableViewState="true" DataTextField="CustomerName" DataValueField="CustomerID">
  <asp:ListItem Text="Please Select Customer" Value=""/>
  </asp:DropDownList></asp:Panel></td>
  <td valign="top" rowspan="2" colspan="2" style="border-left:2px solid #000000;">
  <asp:ContentPlaceHolder ID="cphMainWindow" runat="server" OnLoad="cphMainWindow_Load"> </asp:ContentPlaceHolder>
  </td>
  </tr>
  <tr height="90%">                                              
  <td valign="top" style="vertical-align:top;">
   <asp:TreeView ID="tvMainMenu" runat="server" DataSourceID="SiteMapDataSource1" 
                                  ImageSet="Arrows" HoverNodeStyle-ForeColor="Black">
         <ParentNodeStyle Font-Bold="False" ForeColor="Black" />
         <HoverNodeStyle  Font-Underline="True" ForeColor="#5555DD" />
         <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />
          <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
           </asp:TreeView><asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
           </td>
           </tr>

Upvotes: 1

Views: 750

Answers (2)

John
John

Reputation: 134

Check how your table is set up, it sounds like you could have a misplaced td tag.. That is what I would guess since I can't see all the code that you are having troubles with

Upvotes: 1

peroija
peroija

Reputation: 1982

for fun, for your navigation column, put a style="vertical-align:top;" it sounds like the extended first pane is larger than the navigation (height wise) and since they are in the same row, as column 2 gets bigger, so will column 1. but when the other panes are opened, if they are shorter than column 1 then everything will be fine

Upvotes: 0

Related Questions