Hi Guys, have been developing a site using the Atlas Toolkit and using the Accordion control, up until now it has worked fine in IE and firefox.

As of today when automatic update updated my IE7 accordion no longer works, the accordion flashs on to the screen upon loading the page but then vanishes.

Is anyone else having the same problem? My site was due to go live on Monday but it now looks like I will have no weekend rewriting pages to not use the accordion control unless I can find a solution.

 

Arghhhh.
 

I'm using the just-released ASP.NET AJAX Beta 1 bits and Accordion works for
me in the release of IE 7. Are you using the older Atlas? Is this a public
page that we can browse to check?


wrote in message news:1435184@forums.asp.net...
> Hi Guys, have been developing a site using the Atlas Toolkit and using the
> Accordion control, up until now it has worked fine in IE and firefox.
>
> As of today when automatic update updated my IE7 accordion no longer
> works, the accordion flashs on to the screen upon loading the page but
> then vanishes.
>
> Is anyone else having the same problem? My site was due to go live on
> Monday but it now looks like I will have no weekend rewriting pages to not
> use the accordion control unless I can find a solution.
>
>
>
> Arghhhh.
>

---

Ken

Microsoft MVP [ASP.NET]

Actually...

I have tryed to use the Accordion control on my aplications but in all cases it had the same behaviour(flashes and disappears) on IE7.. it works fine on FF and IE6.x
I was about to quit change this control for something else, however as there is this new release,  I'm gonna give it a try.. i hope it's (REALLY) fixed..

Plus.. I still haven't tested databind on accordion.. ive heard it supports databinding now.. and everytime I wanted to do something like that i had to do it manually.. so I've wrote a class to create the header/content objects inside the accordion container after some iterations.. however.. i don't feel like implementing it for every different application.. I was hopeful to simply create my dal/business things and point some methods to an object data source and bind it to the accordion (not necessarely objectdatasource.. but any binding datasource).. is it possible now??

 

Hi,

I found that when removing the hight attribute in the div that surrounded my accordion, it started to work...

 

 

Lars

I have just come across the exact same thing while testing on IE7 (Accordion control not being displayed).  Removing the height fixes the problem

 

Good to know others have got this working but I'm still having problems.

 

I have updated to the latest release of Ajax + toolkit, still the same problem.

The problem is my accordion control does not have a height set, it isn't in a div and the table it's in also dosn't have any heights set so I'm really stuck as to how to get this working.

 

.AccordionHeader

{

background-color: #e5e5e5;

color: black;

}

.AccordionContent

{

Background-color : white;

color: black;

}

.accordionLink

{

Font-family : Arial;

Font-style : normal;

Font-variant : normal;

Font-weight : normal;

Font-size : medium;

Font : Arial;

color: #fe203a;

 

}

.accordionText

{

Font-family : Arial;

Font-style : normal;

Font-variant : normal;

Font-weight : normal;

Font-size : medium;

Font : Arial;

Color : black;

font-size: 12px;

 

}

 

1    <%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Swyx_DECT.aspx.vb" Inherits="VOIP_Swyx_Swyx_DECT" title="SwyxDECT" %>
2    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AtlasTK" %>
3    
4    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
5        <table border="0" cellpadding="0" cellspacing="0" width="100%">
6            <tr>
7                <td valign="top">
8                    <p>
9                        <span class="headred" style="color: #000000">Products: </span><span class="headblack">
10                           IP 600 DECT system</span>
11                   </p>
12               </td>
13               <td align="right" valign="top">
14                   <a href="/downloads.aspx"></a>
15               </td>
16           </tr>
17       </table>
18       <table border="0" cellpadding="0" cellspacing="0">
19           <tr>
20               <td class="sep_left" valign="top" style="width: 50%; border-right: black thin dotted">
21                   <p>
22                       SwyxWare features can be used with DECT phones so that even premises, warehouses
23                       or production facilities can be integrated into SwyxWare. Offering all familiar
24                       features, DECT phones now makes Voice-over-IP wireless.
25                   </p>
26               </td>
27               <td class="sep_right" valign="top" width="50%">
28                   <p align="center">
29                       <img height="230" src="http://www.swyx.com/images/products/icon_handsets.jpg" width="250" /></p>
30               </td>
31           </tr>
32       </table>
33      
34       <AtlasTK:Accordion ID="PhoneAccordion1" runat="server" SelectedIndex="0" 
35       ContentCssClass="AccordionContent" HeaderCssClass="AccordionHeader"
36       FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="none">
37       <Panes>
38           
39           <AtlasTK:AccordionPane ID="AccordionPane1" runat="server">
40               <Header>
41               
42               <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
43           <tr>
44               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
45               <img src="/Images/corners/inner_tl.gif" width="20" height="20" /></td>
46               <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
47               <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
48               
49               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
50               <img src="/Images/corners/inner_tr.gif" width="20" height="20" /></td>
51           </tr>
52           <tr>
53               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;"></td>
54               <td align="left" valign="top" style="background-color: #e5e5e5; width: 154px; padding-left: 2px; padding-right: 2px;">
55               <!-- image goes here /-->
56               <img src="/Images/Swyx/Phones/DECT_4020.jpg" alt="" onclick="return false;" width="150" height="150" />
57               <!-- end of image block /--></td>
58               <td align="left" valign="top" style="background-color: #e5e5e5;">
59               <!-- description goes here /-->
60              <a href="#" onclick="return false;" class="accordionLink"> DECT Handset 4020</a><br /><br />
61               <a class="accordionText">DECT Handset</a>
62               <!-- end of description block /--></td>
63               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;"></td>
64           </tr>
65           <tr>
66               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
67               <img src="/Images/corners/inner_bl.gif" width="20" height="20" /></td>
68               <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
69               <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
70               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
71               <img src="/Images/corners/inner_br.gif" width="20" height="20" /></td>
72           </tr>
73       </table>
74       
75               </Header>
76               <Content><a class="accordionText">The DECT Handset 4020 which is available in black is the standard handset for common offices. Features like caller list, redial, 6 languages, key lock, short message functionality and variable ring tones make it a flexible and convenient choice.</a></Content>
77           </AtlasTK:AccordionPane>
78           
79           <AtlasTK:AccordionPane ID="AccordionPane2" runat="server">
80               <Header>
81               <table border="0" cellpadding="0" cellspacing="0" style="width: 720px;">
82           <tr>
83               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
84               <img src="/Images/corners/inner_tl.gif" width="20" height="20" /></td>
85               <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
86               <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
87               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
88               <img src="/Images/corners/inner_tr.gif" width="20" height="20" /></td>
89           </tr>
90           <tr>
91               <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;"></td>
92               <td align="left" valign="top" style="background-color: #e5e5e5; width: 154px; padding-left: 2px; padding-right: 2px;">
93               <!-- image goes here /-->
94               <img src="/Images/Swyx/Phones/DECT_4040.jpg" alt="" onclick="return false;" width="150" height="150" />
95               <!-- end of image block /--></td>
96               <td align="left" valign="top" style="background-color: #e5e5e5;">
97               <!-- description goes here /-->
98              <a href="#" onclick="return false;" class="accordionLink"> DECT Handset 4040</a><br /><br />
99               <a class="accordionText">DECT Headset</a>
100              <!-- end of description block /--></td>
101              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;"></td>
102          </tr>
103          <tr>
104              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
105              <img src="/Images/corners/inner_bl.gif" width="20" height="20" /></td>
106              <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
107              <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
108              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
109              <img src="/Images/corners/inner_br.gif" width="20" height="20" /></td>
110          </tr>
111      </table>
112  
113              </Header>
114              <Content><a class="accordionText">Compared with the 4020 the IP DECT handset 4040 has the added benefit of a headset jack for ease of use when on the move.<br /><br />
115              The 4040, which is available in light grey, is a more rugged phone in that it has been designed to be both dust resistant and moisture resistant. Because of these features it can be used in more extreme environments without the user having to worry about damage to the handset.</a></Content>
116          </AtlasTK:AccordionPane>
117          
118          <AtlasTK:AccordionPane ID="AccordionPane3" runat="server">
119              <Header>
120              <table border="0" cellpadding="0" cellspacing="0" style="width: 720px;">
121          <tr>
122              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
123              <img src="/Images/corners/inner_tl.gif" width="20" height="20" /></td>
124              <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
125              <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
126              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
127              <img src="/Images/corners/inner_tr.gif" width="20" height="20" /></td>
128          </tr>
129          <tr>
130              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;"></td>
131              <td align="left" valign="top" style="background-color: #e5e5e5; width: 154px; padding-left: 2px; padding-right: 2px;">
132              <!-- image goes here /-->
133              <img src="/Images/Swyx/Phones/DECT_ip600.jpg" alt="" onclick="return false;" width="150" height="150" />
134              <!-- end of image block /--></td>
135              <td align="left" valign="top" style="background-color: #e5e5e5;">
136              <!-- description goes here /-->
137             <a href="#" onclick="return false;" class="accordionLink"> IP 600 DECT</a><br /><br />
138              <a class="accordionText">DECT Voice-over-IP wireless solution</a>
139              <!-- end of description block /--></td>
140              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;"></td>
141          </tr>
142          <tr>
143              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
144              <img src="/Images/corners/inner_bl.gif" width="20" height="20" /></td>
145              <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
146              <td align="left" valign="top" style="background-color: #e5e5e5;"></td>
147              <td align="left" valign="top" style="background-color: #e5e5e5; width: 20px; height : 20px;">
148              <img src="/Images/corners/inner_br.gif" width="20" height="20" /></td>
149          </tr>
150      </table>
151              </Header>
152              <Content><a class="accordionText">The SwyxWare wireless solution enables all your employees, even the ones who have to spend time away from their desks to be contactable throughout the working day.<br /><br />
153              Using the IP 600 DECT Voice-over-IP wireless solution even spacious areas like warehouses or production facilities can be integrated into the SwyxWare IP-PBX.<br /><br />
154  The base station is connected to the local area network by a regular RJ45 connector and each base station allows up to 35 wireless users and 6 simultaneous calls.<br /><br />
155  The coverage area of the IP 600 DECT system can be extended with the optional connection of DECT repeaters. The IP 600 DECT system allows the connection of 6 cascading repeaters (with a maximum 3 in a row) without additional network access being required. The auto-login and roaming feature of the hand-sets provide a seamless DECT network so users moving between repeaters are able to continue all their calls.<br /><br /></a></Content>
156          </AtlasTK:AccordionPane>
157          
158          
159      </Panes>
160      </AtlasTK:Accordion>
161      <br /><br />
162  </asp:Content>
163  
164  

 

I have a page that uses an accordion control with 12 panes. When I upgraded to IE7, the page stopped working. It would load and then freeze. After some experimentation, I discovered that IE7 seems to have a problem with the number of panes. I reduced the number of panes to 8 and the page displayed normally. If I increased the number of panes to 9, the header and content stylesheet won't apply properly but the page is still functional. If I increase the number of panes further, the page stops responding in IE7. The same page displays properly in IE6 and Firefox.

After further testing, I've discovered that removing the height tags from the panes will make the page functional with more than 8 panes, but the stylesheet still won't apply properly when there are more than 8 panes.

 I have the same problem as you and i can't figure it out.

If i delete the DOCTYPE from the master page the accordion works fine, but some other controls show errors (the tab control doesn't display propperly).

Have you found a solution? 

Hello, I've finaly revisited this problem and it has a very simple solution.

You need to change the Accordion AutoSize attribute to AutoSize="Fill", if you use "none" as shown in the example video when your accordion is embeded inside a div with a height value set, it will flash on the screen and disaper in IE 7. It will still work on safari and firefox.

Using "Fill" allows you to get get round this with out removing the doctype or anything nasty like that.

 
Hope this helps.

Regards,

John