How to make Layout height relative?

[vinuf666]

I have an issue. I am trying to place dhtmlx layout inside an object in a bootstrap
layout Tab row (see code) . The object is a DIV called dhxcontainer

<div class="subnav" style="margin-bottom:24px">
    <ul class="nav nav-pills">
        <li class="active"><a href="#tab_manageparticipants" data-toggle="tab" id="nav_ManageParticipants">Manage Participants</a></li>
        <li><a href="#tab_importparticipants" data-toggle="tab" id="nav_ImportParticipants">Import Participants</a></li>
    </ul>
</div>
<div class="tab-content">
    <div class="tab-pane active" id="tab_manageparticipants">
        
        <div class="row-fluid">
            <div id="dhxcontainer" class="span12" STYLE="height:100%"></div>
        </div>
    </div>
    <div class="tab-pane" id="tab_importparticipants">
        <div class="span3">
        </div>

The width of the dhtmlx layout is good but I have a problem with Height. I want the layout to occupy full height but my problem is, if I set the STYLE to 100% for the DIV dhtmlx layout stays at initial height clipped (see screenshot). If I make it fixed height(STYLE=“height:800px”) in pixels, then the layout appears with all elements displayed(no clips , see second screenshot) but the page does not have a scroll bar to see the elements in the layout. The code I use for dhtmlx is given below:

        dhtmlx.skin = "dhx_terrace";
        var main_frame, blkFilters, frmFilters, blkData, grdParticipants, tbrMgrParticipants;
$(document).ready(function(){    
    
	dhtmlx.image_path='/app/js/dhtmlx412/codebase/imgs/';

	main_frame = new dhtmlXLayoutObject("dhxcontainer", '2U');
        main_frame.cells('a').showInnerScroll();
        main_frame.cells('b').showInnerScroll();
	blkFilters = main_frame.cells('a');
	blkFilters.setText('Data Filters');
	blkFilters.setWidth('350');
        
	blkFilters.fixSize(1,0);
	frmFilters = blkFilters.attachForm();
	//frmFilters.loadStruct('./data/form.xml');




	blkData = main_frame.cells('b');
	blkData.setText('Participants');
	grdParticipants = blkData.attachGrid();
	grdParticipants.setIconsPath('./codebase/imgs/');
	grdParticipants.enableMultiselect(true);
	
	grdParticipants.setHeader(["Emails","First Name","Last Name","Email","Status","Completed Date","Furthest Page Reached"]);
	grdParticipants.setColTypes("ro,ro,ro,ro,ro,ro,ro");
	
	grdParticipants.setColSorting('str,str,str,str,str,str,str');
	grdParticipants.setInitWidths('*,*,*,*,*,*,*');
	grdParticipants.init();
	//grdParticipants.load('./data/grid.xml', 'xml');
	
	tbrMgrParticipants = blkData.attachToolbar();
	tbrMgrParticipants.setIconsPath('/app/js/dhtmlx412/codebase/imgs/'); //change to real images
	
	//tbrMgrParticipants.loadStruct('./data/toolbar.xml', function() {});

I know this problem will not happen if I init on document.body but there are other elements in the page that I need to keep so unfortunately its the hard way.

Basically I want the dhtmlx layout initialized in the DIV to occupy full height, like it occupies its full width. Any help is highly appreciated.

And you have made a really cool framework. I hope you can help me solve this issue.

[Darya]

Please, look at the next link:
docs.dhtmlx.com/layout__offsets.html

[vinuf666]

Hi Darya,

Thank you for the quick response but I still face a similar issue.
I changed the code to the following with the offsets like you suggested.
It seems to put an offset gap for the layout/grid but still there are no scollbars(vertical especially)
for the web page.
The page seems to have lost scrollbars(on the right of the page in the browser which
normally appears for long pages) that are required to scroll the page and see the grid and
other contents below it. This happens in IE, Firefox and chrome when I’m using grid in that page.
Please see screenshot. I am using Bootstrap css with fluid rows to stack elements and the grid

occupies a full row fluid.

Is there anything else that you feel that I might not be doing right for initializing layout in a DIV object?

        var dvLayout = new dhtmlXLayoutObject({
        parent: 'gridbox',
        pattern: "1C",
        offsets: {
        top: 10,
        right: 20,
        bottom: 30,
        left: 40
        },
        cells:[
            {
                id:"a",
                header:false,
                height:550
            }
        ]
        });
        dvgrid = dvLayout.cells("a").attachGrid();
        //dvgrid = new dhtmlXGridObject('gridbox');
	dvgrid.setImagePath("/app/js/dhtmlx412/codebase/imgs/");
	dvgrid.setHeader("Id, Data Value");
	dvgrid.setInitWidths("100,*");
	dvgrid.setColAlign("center,left");
	dvgrid.setColTypes("ro,ed");
	dvgrid.setColSorting("int,str");
	dvgrid.enableMultiselect(true); //for deleting multiple rows
        dvgrid.enableAutoHeight(true,550);
        dvgrid.setUserData("", "fieldId", $("#datafield").val());
	dvgrid.init();
        dvgrid.attachEvent("onXLS", function(grid_obj){ //shows laoding data message
            $("#loadblock").show();
        });
        dvgrid.attachEvent("onXLE", function(grid_obj,count){
            $("#loadblock").hide();

        });
        
	dvgrid.load("/app/ajax_datavalues/<?=$account->id?>/<?=$selTagId ?>",function(){ $("#loadblock").hide(); });

I have changed the div object after going through some of your docs to:

            <div class="row-fluid">
                <div class="span10">
                    <!-- DHTMLX Grid -->
                    <div id="gridbox" class="span12" STYLE="position:relative;height:500px;background-color:white"></div>
                    <!-- End of DHTMLX GRid -->
                </div>
            </div>

Once again, I thank you for your help and look forward to hear from you.

[vinuf666]

After going through various docs, I think I figured it out
and thought I’ll share …
I added the following style and now it appears like a normal page.

<style>   
html, body {
        width: 100%;      
        height: 100%;     
        overflow: scroll; 
        margin: 0px;      
    }
</style>

Thank you for your time and quick help.