Issues with content scaling in Modal HTML dialog

[dlab79]

Hi,

We are in the process of migrating our HTML content that is in the Flex web client over to the HTML web client.  We are currently running into an issue where the content in the dialog is showing up with scroll bars due to our dialog having a height of 500px.  In the Flex plugin we are not seeing these scrollbars.  It seems that the HTML Modal dialogs are not being created large enough to hold the content even though there is enough area available within the page. 

While our content is able to be responsively resized unfortunately the iFrame that they are being rendered in within '.modal-body' is fixed at the size that was specified.  Is there any guidance on how HTML content should be laid out in the modal dialogs to allow the content to resize without getting the scroll bars.  It seems the desired behavior would to allow developers to responsively layout the dialog content by adjusting the iFrame they are running in.

Thanks,

Don

[laurentsd]

hi Don,

Can you provide more details on your code, or modify an existing HTML SDK sample for us to reproduce exactly your problem?  Thanks.

[dlab79]

Here's the modified plugin.xml for the chassis-b sample app, along with the screenshot of what I'm talking about.  I just updated the height to 500px.

[dlab79]

I found that setting the following CSS styles will make sure the dialog is sized correctly and work the same as the Flex client.   The dialog will remain the same size, when the browser gets resized with these changes.  However, I'm not sure if this desired behavior that vmware wants.

.modal-dialog

       min-width = the iframes min width.

.modal-body

     min-width = the iframes min width.

     min-height = the iframe min height.

     overflow = visible.

Thanks,

Don

[laurentsd]

hi Don,

Thanks for the additional explanations. I don't have any scrollbars in my setup when I increased the dialog to 500px but we will review your idea.

If you can set the CSS that only affects your plugin dialog then there is nothing wrong with that.

[VIJAY201110141]

Hi,

We also have similar problem in our env. 

In our plugin.xml file we have the below config specified.

        <delegate>
          <className>com.vmware.vsphere.client.htmlbridge.HtmlActionDelegate</className>
          <object><root>
             <!-- actionUrl maps to ActionsController on the java side -->
             <actionUrl>/vsphere-client/hpeov4vcserver/resources/overview.html</actionUrl>
             <dialogTitle>Sample</dialogTitle>
             <dialogSize>1000,800</dialogSize>
             <dialogIcon>#{addChassis}</dialogIcon>
          </root></object>
       </delegate> 
       
We have the specified the dialog size 1000 x 800px. But the dialog renders only for 960 x 560px and adding scroll bar for rest of the part.

Is it possible to override this recommended max size of the vmware dialog without affecting the other pages.

Thanks.

[dlab79]

It does depend on your browser window size.  In full screen on macbook pro with the resolution set to more space it doesn't happen. Let me know if you need any other information to try to reproduce this.  For now I will add the CSS changes.  Thanks for your help.

[dlab79]

Hi Vijay201110141,

You can just just search for the component in the DOM from your plugin code and modify the CSS values for just the dialog that has the iframe where your plugin is running. For example from your plugin code you can use window.parent.document.querySelector('div .modal-dialog') and window.parent.document.querySelector('div .modal-body') to get the modal dialog and the modal body.  From there you could style those elements so they are large enough to fit your content.  Hope this helps.