Hello, I've bumped into a problem with unspecified height of a WebDialogWindow in Safari.
I am trying to not specify a height so that if I change the contents of the window (in an update panel) it auto sizes to fit. This works in IE and FireFox -and resizes automatically with the content.
However it seems that in Safari, if I don't specify a height, the content pane is only one line high, and the scrollbars are too small/smashed to be usable.
If I set the height, it works initially, but won't automatically adjust as I change the content.
Any advice would be appreciated.
Thanks!
Hi Hamill,
I did not expect that WebDialogWindow will render rounded corners correctly without server-height.
If you want define height of dialog by content of ContentPane, then you should do that on client. The best option: is to process ClientEvents.Loaded, check actual heights and adjust overall height of dialog from those calculated values. All values can be obtains from public properties.If your content is more than one control, then to figure out height of that content, I suggest you to wrap content into a single container, for example DIV. You also may set id for that container in order to simplify getting reference to it on client. Below is example.
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="300px"> <ClientEvents Loaded="dialogLoaded" /> <ContentPane> <Template> <div id="contentOfDialog"> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> other controls </div> </Template> </ContentPane></ig:WebDialogWindow>
<script type="text/javascript">function dialogLoaded(dialog){ // instance of $IG.LayoutPane class var cp = dialog.get_contentPane(); var child = document.getElementById('contentOfDialog'); //or //var child = cp.getBody().firstChild; //or //var child = cp.findChild('contentOfDialog'); if(!child) return; // height of dialog var height = dialog.get_element().offsetHeight; // height of ContentPane var cpHeight = cp.getClientHeight(); //or //var cpHeight = cp.getBody().offsetHeight; // height of child: your desired height var contentHeight = child.offsetHeight; // delta to increase/decrease height of ContentPane var deltaHeight = cpHeight - contentHeight; // final height of dialog height -= deltaHeight; // optinal 'padding': increase for possible errors // height += 5; // set height of dialog dialog.set_height(height + 'px');}</script>
Hi Viktor,
That pretty much did the trick, thanks! I put the event on Initialize="dialogLoaded" but otherwise it worked as advertised. Thanks for your assistance!