My problem is that i have added the modal popup control into a usercontrol. The usercontrol has the code for the modal and the button to initiate the popup.
When i added the usercontrol to a page and click on it this is what i get. My site is centered so i have already scrolled pretty far to the right already so that only the right hand side of my site is showing but then youll see how much grey there is. If you look at the bottom of the picture youll see that there is still alot of room left to scroll to the left. This is my problem. Im not sure why its not displaying on the main screen like the examples.
Now if i remove it from the usercontrol and just put it in the master page then it works fine.
Any ideas??
I tried this with the Toolkit sample page and could not repro the issue. Could you possibly post a small repro? Note that we have fixed some modalpopup positioning issues in the latest versions of the Toolkit. Although, we know that there are some more improvements required for specific cases. If you have the sample ready where the modalpopup does not work as expected that will help us a lot.
I updated to the newest version and while it does not do the same thing its still off centered. Here is code for the main page and user control.
USERCONTROL:
<div style="position:absolute; right:0; top:0;">
<asp:ImageButton ID="cmdGetHelp" runat="server" ImageAlign="absmiddle" ImageUrl="/images/icon_help_32px.gif" />
</div
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<!--HEADER-->
<asp:Panel ID="Panel3" runat="server" Width="500" CssClass="modalTitle" style="cursor:move;">
<div>
<p>TITLE</p>
</div>
</asp:Panel
<!--CONTENT-->
<div>
Content goes here
</div> <!--BUTTONS--> <div style="text-align: right;"> <asp:Button ID="OkButton" runat="server" Text="Submit"/> <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> </div></asp:Panel><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="cmdGetHelp" PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton" OnOkScript="ClosePopup()" CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
DEFAULT.APSX
<!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> <style type="text/css" > .page-container {width:900px; margin:0px auto; border:solid 1px rgb(150,150,150);font-size:1.0em;} .main {border:solid 1px orange; clear:both; width:900px; padding-bottom:30px;} .main-navigation {border:solid 1px red; display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {border:solid 1px green;display:inline /*Fix IE floating margin bug*/; float:left; width:650px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {border:solid 1px blue; clear:both; width:900px; padding:1.0em 0 1.0em 0; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header {width:900px; font-family:"trebuchet ms",arial,sans-serif; border:solid 1px red;} .header-top {width:900px; height:80px; background:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:900px; height:70px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:900px; } .header-breadcrumbs {position:relative;clear:both; width:890px; padding:0.9em 0 0.9em 0; background:rgb(255,255,255) } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager Id="ScriptManager1" runat="server" EnablePartialRendering="true"/><!-- Main Page Container --> <div class="page-container"><!-- A. HEADER --> <div class="header"><!-- A.1 HEADER MIDDLE --> <div class="header-middle"> Header-Middle </div><!-- A.2 HEADER BOTTOM --> <div class="header-bottom"> Header-Bottom </div><!-- A.3 HEADER BREADCRUMBS --> <div class="header-breadcrumbs"> Header-breadcrumbs <lmf:Help ID="help" runat="server" /> </div> </div><!-- B. MAIN --> <div class="main">Main Content place holder<!-- B.1 MAIN NAVIGATION --> <div class="main-navigation">main-navigation </div><!-- B.2 MAIN CONTENT --> <div class="main-content">main-content </div> </div><!-- C. FOOTER AREA --> <div class="footer">footer </div> </div> </form></body></html>Ok it seems that when I place the user control inside a <div> that has absolute or relative positioning then it behaves incorreclty.
What im trying to do is this
I have my breadcrumbs and at the far right of the breadcrumbs i want to show a help image. When that image is clicked on it will open the modal popup.
My problem is getting this image positioned in the exact place that i want it to and in trying to do so with positions, i seem to have caused the problems.
If i place the user control in any other div except for the header-breadcrumb <div> then it displays in the upper right hand of the screen because of the position of the div around that image for the help image. When i do this it works correclty. So it looks like im having css issues but im not sure how to solve them. Any ideas?
This is the div the user control is being placed in. (well not in the code above, in the code above the class header-breadcrumbs has the relative position)
<divstyle="position:relative;">
<lmf:HelpID="lmfHelp"runat="server"/></div>
<divstyle="position:absolute; right:0; top:0;">
<asp:ImageButtonID="cmdGetHelp"runat="server"ImageAlign="absmiddle"ImageUrl="/images/icon_help_32px.gif"/></div>
Thanks a lot for the repro. I have updated this workitem with the files:WorkItemId=10693.
We will look into fixing it for our next release.
kirtid,
For my peace of mind, is this a problem with the modal popup control in respect to positioning or is it a problem created by something that im doing?
EDIT: Never mind kirtid. If i would of just clicked on the workitemid i would of seen that you had recreated the problem and submitted the problem.
Thanks.
No comments:
Post a Comment