DHTMLx Layout dimension to obey surrounding container

Suite and Optimus Suite 5
#1

Hi all,

Is it possible to have a DHTMLx Layout to obey the dimension of its container (in particular for IE7/8)?

e.g.:

<html>
<body>
    <div id="main">
        <div id="header"></div>
        <div id="container"> <!-- this is the target of the dhtmlxLayout -->
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

With the above code, I’d like to display a few things:

  1. Header
  2. Content with DHTMLx Layout that fill the content area
  3. Footer

I’d like the whole thing to fit the whole screen (no scroll).

Thanks,
Ed

#2

Hi,

you may use layout in full screen mode, however, header and footer are set by attachHeader,attachFooter

Please see the demo in the layout package:

dhtmlxLayout/samples/02_conf/inc/header_footer.html

#3

Hi Alexandra,

Thank you for your reply.

I’m still trying to figure out a way to have DHTMLx Layout dimension to inherit the parent’s container (div). Does DHTMLx support this?

I can’t go fullscreen because I’m developing JSR-286 portlet solution (meaning: my portlet will be contained somewhere in a page; there are surrounding divs generated by the Portal Container).

#4

You may call setSizes() method in this case tha layout will recalculate its sizes and adjust to its parent container,

In case of window resize, it is possible to use the following:

var to; dhtmlxEvent(window,"resize",function(){ window.clearTimeout(to); to=window.setTimeout(function(){ dhxLayout.setSizes(); }, 100); });

#5

Hi Alexandra,

The setSizes() workaround doesn’t work as expected.

Let me send the files so you can see what’s going on.

There are a few problems with the layout:

  1. In IE8, the header DIV pushed the container of the layout to the right position, but the setSizes() calculation does not obey the parent container.

  2. in Chrome and Firefox 3.6, the header DIV is overlaid by the container of the layout as if the layout still wants to display itself for the whole screen.

The problem in IE8 is a serious one because when we put it inside our portal solution, the whole layout shrink because IE8 got confused when it performs calculation (because if we capped the document.body size to 100%,100% but the content doesn’t add up, IE8 behaviour is undefined).

On the other hand, why the work-around? Is it because DHTMLx doesn’t support this as-is?
layout.zip (1.26 KB)

#6

Hello,

layout occupies the whole container where it is initialized. If it is initialized in the full screen mode (attached to document body), it is adjusted to body size on window resize automatically. If it is attached to a div, it doesn’t call any methods on resize.

You may use the full screen mode with the header. Please see the sample:

dhtmlxLayout/samples/02_conf/inc/header_footer.html

#7

Hi Alexandra,

The “full-screen” mode is not an option for our project (as I described it earlier at the top).

The setSizes() method does not obey the parent container either when I put the layout inside a div (as the example showed).

So I’m guessing that DHTMLx Layout does not support this particular feature?

#8

Hi,

setSizes() adjusts layout sizes to the container where it is initialized.