asked on

Ajax collapsible panel to stay OVER the underlying content?

I am using the standard asp.net ajax collapsible panel control - I want it to act as a drop-down tool panel for a page with limited space, so that the user can hide it when not in use. Whereas the show/hide works fine, when the panel extends, it shoves down the content on the page and I want it to actually stay OVER the content instead of displacing it.

Is this possible? Or am I using the wrong control for this?

carlnorrbom

Hi,

What type of positioning do you use in css? Also, are all your z-indexes in order?

/Carl.

carled

ASKER

Panel CSS:
.collapsePanel {
      width: 240px;
      height:0px;
      background-color:white;
      overflow:hidden;
}

.collapsePanelHeader
{
      width:240px;
      height:20px;
      color: Yellow;
      background-color: Black;
      font-weight:bold;
      padding:5px;
      cursor: pointer;
      vertical-align: middle;
}

Page code:
<div id="outerDiv">
<div style="float:left;">
<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
<asp:Image ID="Image2" runat="server" ImageUrl="images/expand_blue.jpg"/>  
Tools  
<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
</asp:Panel>

<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
<h1>
<br />
Tools will go here...</h1>
 This area will contain the tools</p>
</asp:Panel>
</div>
<div id="mapDiv">
Map goes here...
</div>
</div>

The mapDiv is filled using ajax and contains a background map image that is twice the width and height of the outerdiv to allow people to drag it around. When the panel drops down, it shoves the map down with it... (the map image is the background image for the div)

carlnorrbom

Hi again,

I think i need to see more relevant code, i'm having a hard reproducing your issue. If i place a background image in the mapdiv using css, it does not get bumped down by the expanding panel...

/Carl.

carled

ASKER

Here you go. Entire test page. Just pick any old image to be map div bg, but opening and closing shifts the image up and down for me...

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testcss2.aspx.vb" Inherits="accountHolders_testcss2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="../fixedCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" SkinID="activetrack" runat="Server"
TargetControlID="ContentPanel"
ExpandControlID="TitlePanel"
CollapseControlID="TitlePanel"
Collapsed="True"
TextLabelID="Label1"
ExpandedText="(show)"
CollapsedText="(hide)"
ImageControlID="Image1"
SuppressPostBack="true">
</ajaxToolkit:CollapsiblePanelExtender>
<div>
<div id="outerDiv">
<div style="float:left;">
<asp:Panel ID="TitlePanel" runat="server" CssClass="collapsePanelHeader">
Tools  
<asp:Label ID="Label1" runat="server">(Show ...)</asp:Label>
</asp:Panel>

<asp:Panel ID="ContentPanel" runat="server" CssClass="collapsePanel">
<br /><p>
Tools will go in here<br /><br />More text here...</p>
</asp:Panel>
</div>
<div id="mapDiv" style="background-image:url(../App_Themes/activetrack/images/mapbg.JPG);height:600px;width:800px;">
</div>
</div>
</div>
</form>
</body>
</html>

carled

ASKER

Hello again, was hoping I'd have attracted a few more comments! Anyhow, if you could maybe post your test page that didn't bump the image down on panel expansion, that woul dbe a great help - then I could see how you did it, perhaps?

Thanks.

ASKER CERTIFIED SOLUTION

carlnorrbom

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

carled

ASKER

Good grief... as simple as that (blushes with embarrassment!)

Many thanks!