Wednesday, March 28, 2012

Virtual Earth kills Accordion

Adding a reference to the VE script makes the content area of the Accordion Control invisible in Firefox. In IE it works fine.

Anybody experienced the same problem and/or found a solution/hack?
I guess you can't use the Accordion control in a VE application and we will have to redesign the user interface...

Ueli
5:PM serious Technology, Brazil

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<html xmlns="http://www.w3.org/1999/xhtml" >3<head>4 <title>Test Page</title>5 <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>6</head>7<body>8 <form id="form" runat="server">9 <asp:ScriptManager ID="ScriptManager" runat="server" />10 <ajaxToolkit:Accordion ID="Accordion" runat="server" AutoSize="Fill" >11 <Panes>12 <ajaxToolkit:AccordionPane runat="server">13 <Header>Header A</Header>14 <Content>Content A</Content>15 </ajaxToolkit:AccordionPane>16 <ajaxToolkit:AccordionPane runat="server">17 <Header>Header B</Header>18 <Content>Content B</Content>19 </ajaxToolkit:AccordionPane>20 </Panes>21 </ajaxToolkit:Accordion>22 </form>23</body>24</html>

phew found a solution, was worried there for a second

Basically for some reason or other VE is applying a opacity:0.1 (inline styling) to all the accordian divs in firefox which makes them not display.

To override this you have to do the following

#youraccordianid div
{
opacity:1 !important;
}

This makes all divs of your accordian have an opacity = 1 the !important tells FF & IE7 that this should override all other style

Hope this helps others

Brian Norman
www.earthware.co.uk

No comments:

Post a Comment