I am using the HoverMenuExtender control inside a GridView. Everything is working fine except users are complaining that the hover menu pops up outside of the page when they hover over an item in the GridView that is towards the bottom. They then have to scroll down in order to see the hover menu. They have requested that the hover menu should pop up wherever there is space on the screen, without them having to scroll around to see it.
Note that my hover menu is quite large and spans over 10 lines, so it's not just a small single line hover menu.
Is there someway that I can override the position that the hover menu pops up at? For example, if there is not enough space to display the hover menu at the bottom of the screen, it should pop up just above where the current user has hovered over. Conversely, if there is not enough space to display the hover menu at the top of the screen, it should pop up just below where the current user has hovered over.
Here is my sample code:
<GridView runat="server" ID="MyGridView"
AutoGenerateColumns="false"
AllowPaging="true"
AllowSorting="true"
DataKeyNames="ID1"
DisplaySelectionColumn="true"
DisplaySelectAllColumn="true"
OnRowDataBound="MyGridView_RowDataBound"
OnSorted="GridView_Sorted"
OnPageIndexChanged="GridView_PageIndexChanged"><PagerStyle CssClass="MyPageCSS" HorizontalAlign="Center" /><Columns><asp:TemplateField><ItemTemplate><asp:Image ImageUrl="~/font/my.png" runat="server" ID="Image1" /><ajaxToolkit:HoverMenuExtender ID="TestHoverMenu"
runat="server"
TargetControlID="Image1"
PopupControlID="Panel"></ajaxToolkit:HoverMenuExtender><asp:Panel runat="server" ID="Panel" CssClass="PopupBackground"><Custom:MyCustomPopup ID="CustomPopup" runat="server" /></asp:Panel></ItemTemplate></asp:TemplateField><BoundField HeaderText="Date" IsUTCDateTime="false" DataField="MyDate" SortExpression="MyDate" /><BoundField HeaderText="Field2" DataField="Field2" SortExpression="Field2" ItemStyle-HorizontalAlign="Center" /><BoundField HeaderText="Field3" DataField="Field3" SortExpression="Field3"/></MyGridView>
Note that I have already tried using PopupPosition=Top/Bottom. This doesn't work because if I set it to Top, then the hover menu gets cut off at the top. If I set it to Bottom, the hover menu gets cut off at the bottom.
Is there a simple CSS or javascript solution to this? I can't use jQuery unfortunately.
Thanks.