•  11-10-2022
  •  | 
  •  

Question

I am having a few style issues with an accordion, when the screen is rendered the accordion is displayed properly, however whenever the expanded pane is changed the bottom of the last accordion pane is hidden.

The accordion is stored in a content placeholder within a master page, the content placeholder on the master page is within a div with no height specified.

EDIT - It seems the accordion is calculating its height incorrectly, so when using the developer toolbar in IE you can see the accordion height automatically updates whenever the tab is changed, incorrectly.

When the screen is rendered -

enter image description here

After clicking on a different pane -

enter image description here

The HTML is -

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>&nbsp;</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;
}

Thanks in advance for any help.

Was it helpful?

Solution

Found a solution, setting the following on the accordion sorts the problem -

AutoSize="Limit"
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top