|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
I have a dialog which I calculate the Content size when the dialog is shown, then call a parent JavaScript function to resize the Dialog allowing for the header, footer, and boarders. The Displayed dialog is shown in different sizes on different browsers. The test browsers I'm using is IE10 and Chrome. I also see problems on the iPad and assume I will have the same problems on other browsers as well. On IE I calculated the Content size as 492 X 198 On Chrome I calculate the content size as 492 X 199 ( +- 1 is due to rounding) My sample site the IE shows ok but the Chrome is too small so scrollbars are displayed as well -- Not a desired feature for my dialogs. ASP.NET 4.0, and VS2012. Sample site at www.softrac.ca/eoSamples/eoControlTest.zip. Please note that the dialog does not display on the sample site -- however, displays fine on my production test site (I think that problem is my VS2012). The basic code functions like this: 1) the parent windows shows the Dialog.show(...) usually from a menu click or some other event 2) the dialog gets the content from the web server via ContentUrl 3) when the onLoad() event is triggered in the dialog - the content is recalculated and a global function is called in the parent window with the new content size. 4) in the parent function the size is adjusted to account for the header, footer and boarders then the Dialog.resize() function is called to adjust the dialog to the correct size. The dialog should be shown with no scrollbars and should just show the content without extra margins -- which would look really bad. Also I have trace messages from my JavaScript functions which display in the Browser console to aid in debugging. I notice that the generated code on IE is by tables and on Chrome/iPad its iFrame. The Dialog style is Windows_vista and I don't really use the footer section in my code. Too bad there isn't a function like Dialog.resizeToContent (width, height) that would compensate for the header, footer, and boarders so I don't have to figure them out myself... maybe a new feature??? Thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi, I think the dialog can already do that. In your code, you will need to: 1. do NOT set the dialog's Width or Height property; 2. Set the size on the content explicitly. For example:
Code: HTML/ASPX
<ContentTemplate>
<div style="width:500px;height:400px;">....</div>
</ContentTemplate>
The dialog will then automatically adjust to fit the contents. Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
I don't use the ContentTemplate I use the ContentUrl to get the page from the server. The same Dialog1 (the only 1) on the parent page is used to show several different dialogs. I have 20+ dialogs which could be shown from the parent page for my application - the parent never does a full post back to the server. Sometimes one dialog page will redirect to another dialog page and on the second dialogs onload() event the dialog object is required to resize for the new content. My dialogs are not user sizeable. They are user moveable though.
I added the size style on one of my dialogs for a test and it only sized to whatever the dialog size was at design time - my case 100X100 since it always had a size change depending on the dialog to display. This is all done on the client side using JavaScript.
Having the parent page contain ALL the code for ALL the dialogs is unthinkable, so using a ContentTemplate is not a viable option.
thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
ContentUrl is basically a ContentTemplate with an iframe.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
OK, but it still does not auto resize as you show in your example.... It just showed the dialog 100X100 with scrollbars when the content (in my example) is 492X198. It needs to show the content without scrollbars....
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
That's because you set the dialog's size to 100 x 100. If you don't set the dialog's size at all, it will automatically fit the contents.
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
Still no joy .... here is what I've got now On my Parent Page: Dialog is opened via a menu.subItem.OnClickScript()
Code: JavaScript
MenuEditAircraft = function ()
{
var dlg = eo_GetObject('Dialog1');
dlg.show(true);
};
Code: HTML/ASPX
<eo:Dialog ID="Dialog1" runat="server" CloseButtonUrl="00020440" ControlSkinID="None" HeaderHtml='Dialog Title' HeaderHtmlFormat="<div style="padding-top:4px">{0}</div>" HeaderImageHeight="27" HeaderImageUrl="00020441" ContentUrl="http://localhost/">
<HeaderStyleActive CssText="background-image:url(00020442);color:#444444;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:7px;padding-left:8px;padding-right:0px;padding-top:0px;" />
<ContentStyleActive CssText="background-color:#f0f0f0;font-family:tahoma;font-size:8pt;padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px" />
<FooterStyleActive CssText="background-color:#f0f0f0; padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<BorderImages BottomBorder="00020409,00020429" BottomLeftCorner="00020408,00020428" BottomRightCorner="00020410,00020430" LeftBorder="00020406,00020426" RightBorder="00020407,00020427" TopBorder="00020402,00020422" TopLeftCorner="00020401,00020421" TopLeftCornerBottom="00020404,00020424" TopRightCorner="00020403,00020423" TopRightCornerBottom="00020405,00020425" />
</eo:Dialog>
On my dialog page: Dialog master -- for all dialogs -- Note: notice I commented out the onload() event
Code: HTML/ASPX
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Dialog.master.cs" Inherits="FlightPlanner.Web.MasterPages.dialogPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript">
function DoDialogClientClose(result){if(typeof this.parent.gDialogCloseFunction=='function'){this.parent.gDialogCloseFunction(result);}}
function DoDialogClientSize(){var div=this.document.getElementById('masterdialogdiv');var w=div.clientWidth;var h=div.clientHeight;var title=this.document.title;if(typeof this.parent.gDialogResizeFunction=='function'){this.parent.gDialogResizeFunction(w,h,title);}}
//window.onload = DoDialogClientSize;
</script>
</head>
<body style="background:#F0F0F0;">
<form id="form1" runat="server">
<div id="masterdialogdiv" class="master-wrapper-dialog">
<asp:ContentPlaceHolder ID="cph1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Dialog body:
Code: HTML/ASPX
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Dialog.Master" AutoEventWireup="true" CodeBehind="AircraftFindDlg.aspx.cs" Inherits="FlightPlanner.Web.AircraftFindDlg" %>
<%@ Register TagPrefix="FlightPlanner" TagName="Finder" Src="~/Modules/AircraftLookup.ascx" %>
<asp:Content ID="Content2" ContentPlaceHolderID="cph1" runat="server">
<div class="dialog-content" style="width:492px; height:199px;">
<FlightPlanner:Finder ID="ctrlFinder" runat="server" />
</div>
</asp:Content>
When the dialog is shown, its a small box on the browser -- caption bar and boarder with a little bit of the content area Approx 75 X 40
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
I do not know what your this.parent.gDialogResizeFunction does. But I think you have to use ConteTemplate instead of ContentUrl, you will need your own iframe and resize your own iframe. This is because the dialog belongs to one document, so you can not resize something inside a different document and expect the dialog to pick it up.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
I think your auto size does not work as you suggest! In fact My resize logic works just fine - as recommended by you guys in another topic previously. >>>---> It is that the Dialog does not resize the same for the different browsers. <---<<< The gDialogResizeFunction() is the old code which has the onload() event commented out for testing - as your request (sort of). The code resides in the parent page JavaScript. The actual code is: but as I said -- not executed for the auto size testing....
Code: JavaScript
var gDialogResizeFunction = function (width, height, title)
{
var dlg = eo_GetObject('Dialog1');
//dlg.resize(width + 28, height + 54); // adjust for dialog frame
dlg.resize(width + 10, height + 27); // adjust for dialog frame
dlg.setCaption(title);
console.error(title + ": Width=" + width + ", Height=" + height);
};
EDIT: I just noticed I deleted an extra line in my example code -- should be:
Code: JavaScript
MenuEditAircraft = function ()
{
var dlg = eo_GetObject('Dialog1');
dlg.setContentUrl ("/AircraftFindDlg.aspx?m=1");
dlg.show(true);
};
On Chrome and iPad (and others) your generated code uses a iFrame, but on IE it uses tables. Please re-read post 3 as why ContentTemplate is not an option.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
OK. So you have to do it your way and don't want to follow our suggestions. We are not sure what else we can tell you. As such please consider this issue closed.
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
I have tried and tried to do it your way -- it does not work!
To use a ContentTemplate for 20 some dialogs will make my page megabytes in size whenever anyone loads it. It cannot be cached on the client as it is dynamic content!!!
Please see your response to the topic "Suggestion please -- best way to open two consective dialogs" which recommends doing it the way I have. This still does not address the issue of size different for different browsers....
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
There is no material difference between using ContentTemplate with an iframe and using ContentUrl. Your ContentTemplate will be the same for 20 dialogs --- with just a single iframe element in it. You can then set the iframe's src attribute the same way as you were setting the dialog's ContentUrl. The difference that using ContentTemplate makes to you is, since you now have directly access to the iframe element, you can adjust the iframe element's size to adjust the dialog size.
Hope this clears it up for you.
|
|
Rank: Advanced Member
Groups: Member
Joined: 5/15/2013
Posts: 34
|
OK - I tried your suggestion with the iFrame and on the surface seems to be the solution for me.
The dialog pages didn't auto resize, but, I used a variation of my code to adjust the iFrame size on the onload() and that seems to work fine -- I need to change dialog titles on the onload anyway.
I still have a sizing problem on pages that use the tab strip, but, I think this in in my CSS settings -- still testing.....
I will now modify my development test system to use this technique as I have more functionality to play with.
Is there a simple what to re-center the dialog after it has been resized ??
Thanks
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,195
|
Hi,
I believe the only way to re-center the dialog is to hide it, then show it again.
Thanks!
|
|