Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
130
WDW Height in Safari
posted

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!

Parents
  • 24497
    Verified Answer
    posted

    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>

Reply Children
No Data