HoverMenuExtender Popup Vertical Position problem (Urgent)
Question
-
User202390982 posted
I have a problem .. my popup panel attached to the HoverMenuExtender does not appear in the correct position ..
did anybody had the same problem? Help me its urgent ..
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!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>TaskManager v1.0</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html {
overflow: hidden;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#banner {
padding: 0;
margin: 0;
;
top: 0px;
left: 0px;
width: 100%;
height: 85px;
overflow: hidden;
}
#contentHeader {
padding: 0;
margin: 0;
;
top: 86px;
left: 0px;
height: 27px;
width: 100%;
overflow: hidden;
}
#content {
padding: 0;
margin: 0;
;
top: 113px;
left: 0px;
right: 201px;
bottom: 101px;
/* IE6 Bugg Fix */
height: expression(document.body.clientHeight - 213);
width: expression(document.body.clientWidth - 201);
overflow: auto;
}
#sidebar {
padding: 0;
margin: 0;
;
top: 113px;
right: 0px;
bottom: 101px;
/* IE6 Bugg Fix */
height: expression(document.body.clientHeight - 213);
width: 200px;
overflow: auto;
}
#footer
{
padding: 0;
margin: 0;
;
bottom: 0px;
height: 0px;
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<div id="banner">
</div>
<div id="contentHeader">
<div class="contentGridHeader">
<table class="GridHeaderClass" cellpadding="1" cellspacing="0" border="0">
<tr>
<td style="width: 50px; border-right: Solid 1px #01305a;" valign="middle">
Sl No
</td>
<td valign="middle">
Task
</td>
<td valign="middle" align="right">
<table cellpadding="1" cellspacing="0" border="0">
<tr>
<td>
Task Type :
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>sdf</asp:ListItem>
<asp:ListItem>asdf</asp:ListItem>
<asp:ListItem>asdf</asp:ListItem>
<asp:ListItem>sdaf</asp:ListItem>
<asp:ListItem>sadf</asp:ListItem>
</asp:DropDownList>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<div class="contentGridView">
<asp:GridView ID="gridTask" runat="server" DataSourceID="SqlDataSource1" ShowHeader="False" AutoGenerateColumns="False" GridLines="None" CellPadding="2" ForeColor="White" OnRowDataBound="gridTask_RowDataBound">
<HeaderStyle CssClass="TestHeader" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="pnlContextMenu" runat="server" CssClass="ContextMenuPanel" Style="visibility: hidden">
<asp:LinkButton ID="btnAdd" runat="server" Text="Add" CssClass="ContextMenuItem" />
<asp:LinkButton ID="btnEdit" runat="server" Text="Edit" CssClass="ContextMenuItem" />
<asp:LinkButton ID="btnDelete" runat="server" Text="Delete" CssClass="ContextMenuItem" />
</asp:Panel>
<asp:Panel ID="pnlRow" runat="server">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td width="50px">
<asp:Label ID="lblSlNo" runat="server" Text="" />
</td>
<td>
<asp:Label ID="lblTask" runat="server" Text='<%#Eval("TASK") %>' />
</td>
</tr>
</table>
</asp:Panel>
<cc1:HoverMenuExtender ID="HME" runat="server" PopupControlID="pnlContextMenu" PopupPosition="Right" TargetControlID="pnlRow" PopDelay="25" HoverCssClass="popupHover" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TaskManagerConnectionString %>" SelectCommand="SELECT [SLNO], [TASK], [STATUS] FROM [tblTasks]" />
</div>
</div>
<div id="sidebar">
<div class="contentcss">
Some other stuff here ..
</div>
</div>
<div id="footer">
<div class="contentcss">
</div>
</div>
</form>
</body>
</html>CSS :
.ContextMenuPanel
{
position:relative;
border: 1px solid #868686;
z-index: 1000;
background: url(Images/menu-bg.gif) repeat-y 0 0 #FAFAFA;
cursor: default;
padding: 1px 1px 0px 1px;
font-size: 11px;
}
a.ContextMenuItem { margin: 1px 0 1px 0;
display: block;
color: #003399;
text-decoration: none;
cursor: pointer;
padding: 4px 19px 4px 33px;
white-space: nowrap;
}
a.ContextMenuItem-Selected { font-weight: bold;
}
a.ContextMenuItem:hover { background-color: #FFE6A0;
color: #003399;
border: 1px solid #D2B47A;
padding: 3px 18px 3px 32px;
}
.popupHover {
background-image:url(images/header-opened.png);
background-repeat:repeat-x;
background-position:left top;
background-color:#F5F7F8;
color:Black;
}
