Проблема со стилем аккордеона Ajax

У меня есть несколько проблем со стилем с аккордеоном, когда экран отображается, аккордеон отображается правильно, однако всякий раз, когда расширенная панель изменяется, нижняя часть последней панели аккордеона скрывается.

Аккордеон хранится в заполнителе содержимого на главной странице, заполнитель содержимого на главной странице находится в блоке div без указания высоты.

РЕДАКТИРОВАТЬ. Кажется, что аккордеон неправильно вычисляет свою высоту, поэтому при использовании панели инструментов разработчика в IE вы можете видеть, что высота аккордеона автоматически обновляется при каждом изменении вкладки, неправильно.

Когда экран рендерится -

введите описание изображения здесь

После нажатия на другую панель -

введите описание изображения здесь

HTML - это -

Страница с вопросом -

<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>

Мастер-страница -

<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;
}

Заранее благодарю за любую помощь.


person user1948635    schedule 14.02.2014    source источник
comment
Разве это не должно произойти?   -  person Omar Himada    schedule 14.02.2014
comment
Замени вещь в вещи вещью. - Не могу ответить без кода, с которым можно работать!   -  person Niet the Dark Absol    schedule 14.02.2014
comment
Нижняя панель аккордеона на втором изображении обрезана, вы можете видеть только часть заголовка. Я исправлю сообщение выше с помощью HTML   -  person user1948635    schedule 14.02.2014


Ответы (1)


Нашел решение, установив следующее на аккордеоне, сортирует проблему -

AutoSize="Limit"
person user1948635    schedule 14.02.2014