I am trying to understand the best way to utilize layouts. Let me describe what I am trying to do.
I have a page that must always have a toolbar at the top of the page, and different content depending on the toolbar item selected. Some items will display in a grid and others will need a container such as a div. Before I describe the problem I will describe how I have defined the page:
create a one cell layout to hold the toolbar, using: new dhtmlXLayoutObject(document.body, “1C”);
attach a div to this (first) layout to hold a second layout for the content, using layout.cells(‘a’).attachObject(div);
I then attach the toolbar to the first layout, using: layout.cells(‘a’).attachToolbar();
create the second one cell layout to hold the content, using: layout2 = new dhtmlXLayoutObject(div, “1C”);
So I have a DOM that resembles the following (leaving out most of the elements added by dhtmlx):
:
:
:
:
some further content.
This seems pretty straight forward to me, but maybe there is a better way to do this.
Now the problem I am having when the browser is resized is that the second layout
does not extend horizontally to the end of the browser, and the root div is left sticking out on the right.
I have tried different setting for this div including giving it a width of 100%, giving it no width,
using relative, absolute and no positioning, but the end result is the same.
I have also added: layout.setAutoSize(‘a;a’, ‘a;a’); to both layouts, but nothing seems to work.
Thanks for your reply. Is there a way to actually attach a file, or do I need to just paste it?
I have two small files I would like post of examples of the problems I am seeing.
I tried to attach two example files, but was not able to add them as I kept getting “The upload was rejected because the upload file was identified as a possible attack vector.” so I will just include them below.
Both example files attach a layout to the document.body and a toolbar and a div to the layout. The div is then used to display different content, as chosen from the toolbar.
The toolbar presents two items, the first just writes to the div and the second attaches a tabbar to the div.
The first file initializes the tabbar from an xml file, sets the hrefmode to ajax-html and retrieves the content for each tab by url, within the anonymous function that is the second argument of the loadXML function. This file causes IE9 to throw up an alert and the error: SCRIPT438: Object doesn’t support property or method ‘selectNodes’ at line 33 character 137 of dhtmlx.js. If I set the debugger to break on error it takes me line 33 of dhtmlx.js. This behavior happens when the second toolbar item (the one that tries to set up a tabbar) is selected.
The second example file appears to almost work, The tabbar is drawn however the content is never displayed, although it is present in the DOM.
Also, in both examples the height of the content div is reduced to 13px even though the div height and width are set to 100%.
Any help you can offer is greatly appreciated.
Thanks,
Daryl
Example File #1:
test #1
body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
background-color: gray;
}
Example File #2:
test #2
body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
background-color: gray;
}
