I set the accordion height to 100%. When the browser is resized (both IE and FF) the accordion height remains static. Is this the intention or should it resize accordingly?
Here is the sample page I am using.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AccordionTest.aspx.cs" Inherits="Accordion_AccordionTest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
</head>
<body>
<form id="form1" runat="server" style="height: 100%;">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />
<div style="height: 100%;">
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
Width="200px" Height="100%"
AutoSize="Fill" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="" class="accordionLink">1. Accordion</a></Header>
<Content>
Test
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<a href="" class="accordionLink">2. AutoSize</a></Header>
<Content>
More test
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
Comments: I've added the following handler to the window resize event to get around this issue: window.onresize = function (event) { var accordion = document.getElementById('<%=MyAccordion.ClientID %>'); accordion.style.height = '100%'; }
Here is the sample page I am using.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AccordionTest.aspx.cs" Inherits="Accordion_AccordionTest" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
</head>
<body>
<form id="form1" runat="server" style="height: 100%;">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />
<div style="height: 100%;">
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
Width="200px" Height="100%"
AutoSize="Fill" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>
<a href="" class="accordionLink">1. Accordion</a></Header>
<Content>
Test
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<a href="" class="accordionLink">2. AutoSize</a></Header>
<Content>
More test
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
Comments: I've added the following handler to the window resize event to get around this issue: window.onresize = function (event) { var accordion = document.getElementById('<%=MyAccordion.ClientID %>'); accordion.style.height = '100%'; }