I use the modalPopupExtender to show a panel with a label inside. The label has a dropdownextender connected that is showing another panel.
Everything works nice until the the dropdownwxtender is triggered. The dropdownextender is offset with approx. left +2px and top +2px.
How can this be solved?
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server"PopupControlID="Panel2"TargetControlID="Button1"></cc1:ModalPopupExtender>
<asp:PanelID="Panel2"runat="server">
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label><cc1:DropDownExtenderID="DropDownExtender1"runat="server"DropDownControlID="Panel10"TargetControlID="Label1">
</cc1:DropDownExtender>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:UpdatePanelID="UpdatePanel2"runat="server">
<ContentTemplate>
<asp:PanelID="Panel10"runat="server">
1<br/>
2<br/>
3
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Regards,
Jonas
Firefox works; IE's broken. This'll fix IE but break Firefox. Check with someone who knows CSS for a better solution.
<div style="position: relative; left: -4px; top: -4px;"> <asp:Label ID="Label1" runat="server" Text="Label"> </asp:Label></div>
I'm sorry to say that I still get the same result. (This applies to both IE and Firefox.)
It's not the label that is offset it's the graphics of the dropdownextender that is supposed to surround the label. (See image below.)
In the beta2 DropDown sample, the
TargetControlID="TextLabel"DropDownControlID="DropPanel"
have both inline styling and styling in a .css file in the App_Themes folder. Seeing as the sample works, I'd suggest applying this as a model to your code.
The beta2 DropDown sample works fine.
The problem occurrs when the DropDown is placed inside of a panel that is shown (popup) by an ModalPopupExtender.
Jonas, I have exactly the same problem. The box that encloses the text label is shifted down and to the right, 2 or 3 pixels each. Mine is not in a modal panel, but it is in a panel (that is probably in another panel in another, etc.) Unfortunately, I don't have time in this project to start taking away panels or moving out of them to see where it breaks, but I have no doubt that it would display properly if contained right in the root document panel. I have similar problems with some other toolkit extenders. Various things cause them to miscalculate their intended location, and there doesn't seem to be a way to get the affected controls' ClientID, so workarounds are limited.
Try adding the following style element to the text label (below, in bold). You may have to adjust the numbers. The four parts of thepadding value are top, right, bottom, left (clockwise from top).
<asp:LabelID="Label1"runat="server"Text="Label"Style="padding: 5px 5px 0px 5px;">
It leaves a bit of extra space at the bottom of the label, but it might work for you. It did for me. Unfortunately, I really want to use an image for the control instead of a label. Works great, but I cannot get rid of the 2px space below the image inside the drop-down control frame that is created by the extender.
If anyone knows of any tips and tricks for solving these offset problems on this and other extender controls, I'd be very grateful.
Thanks, -Brian
Let's step back a moment. And clarify. When your code was placed into the sample, I saw your reported offsets in IE, but Firefox showed no sign of having a problem with the combination. When I styled your code with 4px adjustments, then IE worked and Firefox didn't. It appears a solution, perhaps not the only solution, is to implement distinct styling that satisfies various browsers in the case of a modalpopup being combined with a dropdown. In that the modal/dropdown combo causes a browser variation, I'm thinking an IE CSS hack (specific to IE and not other browsers) might be needed...
Here's your code with the fix for IE but breaks Firefox (shows the offsets you've described). Followed by a pic of the IE display with the 4px fix. Hope this helps:
<%@. Page Language="C#" MasterPageFile="~/DefaultMaster.master" AutoEventWireup="true" CodeFile="Copy of DropDown.aspx.cs" Inherits="DropDown_DropDown" Title="DropDown Sample" StylesheetTheme="DropDownTheme" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager ID="scriptManager" runat="server" /> <div> <asp:Button ID="Button1" runat="server" Text="Button" /> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel2" TargetControlID="Button1"></ajaxToolkit:ModalPopupExtender> <asp:Panel ID="Panel2" runat="server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div style="position: relative; left: -4px; top: -4px;"> <asp:Label ID="Label1" runat="server" Text="Label"> </asp:Label></div> <ajaxToolkit:DropDownExtender ID="DropDownExtender1" runat="server" DropDownControlID="Panel10" TargetControlID="Label1"> </ajaxToolkit:DropDownExtender> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Panel ID="Panel10" runat="server" > 1<br /> 2<br /> 3 </asp:Panel> </ContentTemplate> </asp:UpdatePanel></div></asp:Content>
Silver, now I se the effects of your fix. I'm sorry that I didn't notice it before, but I was to concentrated on the graphics surrounding the label (the blue border and the arrow). As you are saying, your fix aligns the dropdownlist, however the graphics is no longer visisble.
I'm running Firefox 1.5.0.8 and Firefox is missing the graphics with or without the fix.
IE with fix
IE witout fix
Firefox with fix
Firefox without
IE as it should be
Brian, unfortunately your fix doesn't work for me.
Regards,
Jonas
Download latest source at codeplex, build, place AjaxControlToolkit.dll in samplewebsite bin and apply a modal extender to the dropdown sample. Looks okay on IE6 and FF1.5.08
aspx
<div class="demoarea"> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1" PopupControlID="DropPanelx" BackgroundCssClass="modalBackground" /> <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to see the dropdown"></asp:LinkButton> <div class="demoheading"> DropDown Demonstration </div> <asp:Panel ID="DropPanelx" runat="server"> <asp:Label ID="TextLabel" runat="server" Text="Hover Over Me" Font-Names="Tahoma" Font-Size="11px" Style="display: block; width: 300px; padding:2px; padding-right: 50px;" /> <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display:none;visibility:hidden;"> <asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option3" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem" OnClick="OnSelect" /> </asp:Panel></asp:Panel> <ajaxToolkit:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel" DropDownControlID="DropPanel" /> <br/>
Well, i have the same offset-Problem. i have a panel outside my DDE and the dedicated controls (Hyperlink and MenuePanel). And this Panel has a Stylesheet with position-attributes (position: absolute). When i disable these position-attributes, the DDE appears at the correct position.
Maybe it can be a answer to your problems with the DDE.
cu, Xela
Seethis issue. They marked it closed, but it's not solved. The OP solution works.
Description
When i put a dropdown in a gridview , I get an offset X of 4 pixels and an offset Y of 3 pixels
If I remove lines 211 and 215 in common.js. It works.
tdjastrzebski:
