Ajax Accordion issues in firefox/chrome

问题:

I have an accordion with 2 pane. The thing is if I set it to autosize="Limit" and selectedindex="0", when load the first time, in IE 9, it works perfectly fine but in firefox/chrome, the size of the content pane is smaller than the content. But if I close and open back the pane, it will work fine.

If I set it to selectedindex="-1", in IE9 it will work fine where all the pane will collapse, however in chrome/firefox, It fully open the first pane.

How can I make it to fully open in all browser. I've tried to set the autosize="Fill", but the result is same as the above.

Here is the code

<ajaxToolkit:Accordion id="Accordion" runat="server" Height="100%" Width="100%" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" AutoSize="Fill" RequireOpenedPane="true">
                        <Panes>
                            <ajaxToolkit:AccordionPane ID="accordionPaneReport" runat="server">
                                <Header>Reports</Header>
                                <Content>

//some treeview content
</Content>
 </ajaxToolkit:AccordionPane>
                            <ajaxToolkit:AccordionPane ID="accordionPanePcGroup" runat="server" Visible="false">
                                <Header>PC Groups</Header>
                                <Content>

//some treeview content
</Content>
 </ajaxToolkit:AccordionPane>
                        </Panes>
                    </ajaxToolkit:Accordion>

Update: I tried to debug using firebug. If I put padding-bottom some value to the accordion content css, it will make the content pane longer than the real content itself but it's not a real fix, i guess..

回答1:

I would remove the Height="100%" and see if your problem still exist. Also try a fixed height and see how it behaves. Not all browsers render height the same way.

回答2:

I already found a solution for my own question.

It behave that way due to the accordion css got run before its div container css. So when first load, the accordion thought the div space was not enough, hence, the pane appear smaller than what it should.

What I did was to move the div css on top of the accordion css where the height of the div is 100%.

In IE, seems like it read the whole thing than only load it. But in other browser, seems like it loads the stuff one by one according to its order. Thats why it was working fine in IE only.

sorry I have to tick this as the answer..