There is an “InvalidArgument”error when we are using AccordionPane for some scenarios. It looks like the layout function is causing the problem where the following calculation results a negative value for InternetExplorer (IE). However for other browsers it works fine.
“this._verticalSpace = (mySize.h - totalCollapsedHeight);”
Why this is returning a negative value for IE?
I have attached a sample HTML pages for testing this. Just try to load the Sample_index.html. You cant see the right hand side AccordionPane is not loading.
Sample_index.html
---------------------------------------------------------------------------------------
<head>
<title>Test Split Pane</title>
<script type="text/javascript"
src="../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript" src="common/_testCommon.js"></script>
<script src="DisplayContentScript.js" type="text/javascript"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <LINK
href="common/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
dojo.require("dijit.layout.LayoutContainer"); dojo.require("dijit.Toolbar");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.dnd.Source");
dojo.require("dijit.layout.TabContainer"); dojo.require("dojo.parser");
//This executes the "DisplayContent" method, after the HTML is fully loaded.
dojo.addOnLoad(function(){DisplayContent('mainDiv');}); </script>
<!--Style sheet change script ends here-->
</head>
<body>
<!--*****Main Layout Container - Start - "Dojo Main Container" **************-->
<div id="mainDiv" style="VISIBILITY: hidden"
dojoType="dijit.layout.LayoutContainer">
<div dojoType="dijit.layout.SplitContainer" layoutAlign="client"
orientation="vertical" persist="false">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:
100%; height: 50em;">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="tab1"
href="./sample_page.html" selected="true">
</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="tab2" >
</div>
</div>
</div>
</div>
</body>
<title>Test Split Pane</title>
<script type="text/javascript"
src="../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript" src="common/_testCommon.js"></script>
<script src="DisplayContentScript.js" type="text/javascript"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <LINK
href="common/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
dojo.require("dijit.layout.LayoutContainer"); dojo.require("dijit.Toolbar");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane"); dojo.require("dojo.dnd.Source");
dojo.require("dijit.layout.TabContainer"); dojo.require("dojo.parser");
//This executes the "DisplayContent" method, after the HTML is fully loaded.
dojo.addOnLoad(function(){DisplayContent('mainDiv');}); </script>
<!--Style sheet change script ends here-->
</head>
<body>
<!--*****Main Layout Container - Start - "Dojo Main Container" **************-->
<div id="mainDiv" style="VISIBILITY: hidden"
dojoType="dijit.layout.LayoutContainer">
<div dojoType="dijit.layout.SplitContainer" layoutAlign="client"
orientation="vertical" persist="false">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:
100%; height: 50em;">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="tab1"
href="./sample_page.html" selected="true">
</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="tab2" >
</div>
</div>
</div>
</div>
</body>
Sample_page.html
--------------------------------------------------------------------------------------
<body>
<div dojoType="dijit.layout.SplitContainer" layoutAlign="client"
orientation="horizontal" persist="false">
<div dojoType="dijit.layout.SplitContainer" orientation="vertical"
persist="false" sizeShare="80" sizeMin="125" activeSizing="true">
<div title="Content" dojoType="dijit.layout.ContentPane" sizeShare="70"
sizeMin="75">
Test Area
</div>
<div title="Inf" dojoType="dijit.layout.ContentPane"
sizeShare="30" sizeMin="75">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td height="25"><strong> Title </strong></td>
</tr>
</table>
Test
</div>
</div>
<div dojoType="dijit.layout.AccordionContainer" duration="200" class="blueForm">
<div dojoType="dijit.layout.AccordionPane" title="a">
AccordionPane 1
</div>
<div dojoType="dijit.layout.AccordionPane" title="b">
AccordionPane 2
</div>
</div>
</div>
</body>
<div dojoType="dijit.layout.SplitContainer" layoutAlign="client"
orientation="horizontal" persist="false">
<div dojoType="dijit.layout.SplitContainer" orientation="vertical"
persist="false" sizeShare="80" sizeMin="125" activeSizing="true">
<div title="Content" dojoType="dijit.layout.ContentPane" sizeShare="70"
sizeMin="75">
Test Area
</div>
<div title="Inf" dojoType="dijit.layout.ContentPane"
sizeShare="30" sizeMin="75">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td height="25"><strong> Title </strong></td>
</tr>
</table>
Test
</div>
</div>
<div dojoType="dijit.layout.AccordionContainer" duration="200" class="blueForm">
<div dojoType="dijit.layout.AccordionPane" title="a">
AccordionPane 1
</div>
<div dojoType="dijit.layout.AccordionPane" title="b">
AccordionPane 2
</div>
</div>
</div>
</body>
probably
Probably because you didn't specify height for the main LayoutContainer.