Currently facing some style complications with an accordion element. When the screen is being displayed, everything looks good. However, whenever I switch to an expanded pane, the bottom of the last accordion pane gets hidden.
The accordion is placed inside a content placeholder on a master page, and the content placeholder is contained within a div that doesn't have a specified height.
EDIT - It appears that the accordion is miscalculating its height. While using the developer toolbar in IE, it's evident that the accordion's height automatically adjusts incorrectly when switching tabs.
Initial display:
After clicking on another pane:
Here is the HTML code:
Page with the issue -
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolderMain">
<h2 style="width: 836px">Manage Fields</h2>
<br />
<cc1:Accordion ID="uxAccordion" runat="server" SelectedIndex="2">
<Panes>
<cc1:AccordionPane ID="pane1" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Categories</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc1:CustomCategories ID="CustomCategories1" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="pane2" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Fields</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc2:CustomFields ID="CustomFields1" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="pane3" runat="server" ContentCssClass="accordionContent" HeaderCssClass="accordionHead" BorderStyle="Solid" BorderWidth="1" BorderColor="Black">
<Header>
<h3>> Custom Help</h3>
</Header>
<Content>
<div class="accordionInnerContainer">
<uc3:CustomHelp ID="CustomHelp2" runat="server" />
</div>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
</asp:Content>
Master Page -
<body class="onecol">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="bodyContainer">
<div id="headerContainer">
<uc2:UserPanel id="UserPanel1" runat="server"></uc2:UserPanel>
<uc3:PrimaryNav ID="PrimaryNav1" runat="server" />
</div>
<div id="mainContainer">
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="subNav">
<p> </p>
</div>
<div id="sideContainer">
</div>
<div id="footer">
<uc1:footer ID="Footer1" runat="server" />
</div>
</div>
</form>
</body>
CSS -
body{font: 72% arial,sans-serif;text-align:center}
div#bodyContainer{text-align:left;width:900px;margin:0 auto;background-color:#FFF;}
div#headerContainer{background:url(../images/headerbackgrad.jpg) repeat-x;height:116px;}
div#mainContainer{float:left;width:100%}
div#contentContainer{margin: 0 470px 0 0}
div#subNav{float:left;width:150px;margin-left:-700px}
div#subNav{display:none;}
div#sideContainer{float:left;width:400px;margin-left:-420px}
div#footer{clear:left;width:100%}
div#mainContainer{min-height:400px;_height:400px;}
.accordionHead
{
padding: 1px;
font-weight:bold;
background-color:#ceeffe;
border-bottom: 1px solid black;
}
.accordionContent
{
}
.accordionInnerContainer
{
width: 850px;
padding-left: 5px;
}
I would greatly appreciate any assistance provided. Thank you!