I have 2 accordions that I am using side by side. I have a textbox that I am floating right within one of the panels with a validator attached to it. It works ok in IE but if I try it in FF the validator is been displayed behind the right accordion.
I have created a small example to prove I am not going mad. Can anyone help out?
spnz
Member
103 Points
467 Posts
Validator callout extendar not been displayed correctly when using 2 accordions side by side
Jan 20, 2008 10:43 PM|LINK
Hi,
I have 2 accordions that I am using side by side. I have a textbox that I am floating right within one of the panels with a validator attached to it. It works ok in IE but if I try it in FF the validator is been displayed behind the right accordion.
<style type="text/css"> bodyI have created a small example to prove I am not going mad. Can anyone help out?
{
margin:0 0 0 0;}
.style1{
width: 100%;}
.leftContent{
background-color:Blue; height:300px; z-index:1000;}
.leftHeader{
background-color:Red; height:45px; z-index:1000;}
.rightContent{
background-color:Gray; height:300px; z-index:-1000;}
.rightHeader{
background-color:Green; height:45px; z-index:-1000;}
.TextBox{
float:right;}
</style></
head><
body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <div style="width: 49%; float: left;"> <cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="leftHeader" ContentCssClass="leftContent"> <Panes> <cc1:AccordionPane runat="server" ID="accordLeft1"> <Header>Header Left 1
</Header> <Content> <asp:TextBox ID="TextBox1" runat="server" CssClass="TextBox"/> <br /> <asp:Button ID="button1" runat="server" Text="Validate" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1" /> <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1"> </cc1:ValidatorCalloutExtender> </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="Accordion2" runat="server"> <Header>Header Left 2
</Header> <Content> <asp:TextBox ID="TextBox2" runat="server" CssClass="TextBox"/> <cc1:CalendarExtender ID="calExt" TargetControlID="TextBox2" runat="server" PopupPosition="BottomRight"/> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </div> <div style="width: 50%; float: right;"> <cc1:Accordion ID="Accordion3" runat="server" ContentCssClass="rightContent" HeaderCssClass="rightHeader"> <Panes> <cc1:AccordionPane runat="server" ID="AccordionPane3"> <Header>Header Right 1
</Header> <Content> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>content right
</Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane4" runat="server"> <Header>Header Right 2
</Header> <Content>Right content 2
</Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </div> </div> </form></
body> </html>